/*
 * Story 111: the Modernist design system's tokens -- Archivo type, a
 * red-on-off-white color ramp, a spacing scale, and a strong 2px divider
 * convention with zero corner radius. Every component and hand-built page
 * should read its color/type/spacing/radius from these custom properties
 * rather than hard-coding values of its own, so the whole site shares one
 * source of truth for the look.
 */
:root {
  /* Color */
  --color-background: #f7f5f0;
  --color-surface: #ffffff;
  --color-text: #14110f;
  --color-text-muted: #5c5850;
  --color-accent: #d6321e;
  --color-accent-contrast: #ffffff;
  /* Story 65: a pale tint of --color-accent, for the Grid view's "clash"
     session state -- needs to read as distinctly its own thing next to the
     solid-accent "on my list" state and the plain-white "available" state,
     without introducing a second hue into an otherwise deliberately
     two-color (red-on-off-white) system. */
  --color-accent-tint: #ffe0d9;
  /* The accent at low strength, for the thin lines of the clash crosshatch below: enough to read as a
     pattern at a glance, faint enough not to fight the text over it. */
  --color-accent-hatch: rgb(214 50 30 / 0.11);
  /* A session that overlaps one on the visitor's list: fine diagonal lines crossed both ways, a
     background-image to lay over whatever background colour the element has. It says "clash" by texture
     as well as colour, so it doesn't rely on telling reds apart. */
  --pattern-clash-hatch:
    repeating-linear-gradient(45deg, var(--color-accent-hatch) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, var(--color-accent-hatch) 0 1px, transparent 1px 7px);
  --color-border: #14110f;
  /* A lighter rule than --color-border, for internal grid lines (e.g. the
     Grid view's hour rows) that need separation without the weight of a
     full section divider. */
  --color-border-subtle: #ddd9d1;
  /* A muted fill for cells that carry no content of their own (e.g. the
     month grid's padding days outside the festival's own date range). */
  --color-surface-muted: #ece9e4;
  /* Darker accent for hover/active states on accent-colored elements --
     the same role as the reference design's --color-accent-600. */
  --color-accent-hover: #ab291a;

  /* Type -- Archivo is the only typeface, for both headings and body; the
     weight scale is what distinguishes emphasis, not a second family. */
  --font-family-base: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* Spacing -- a 4px-based scale, used for all margin/padding/gap. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius -- deliberately a single value: Modernist components never round
     a corner, so there's no scale to vary, only this one flat token. */
  --radius-none: 0;

  /* The strong divider/rule width used for hr's and section borders. */
  --border-width-rule: 2px;
}