/* tokens.css: the ONE set of site v2 fonts, colors and the phone-only dark palette (2026-10-03).
   Imported first by fh2.css (the new pages) and legacy.css (the older pages restyled in Phase 5), so a color is
   defined once and both stylesheets follow it. Change a color HERE; scripts/walk-site2-dark.mjs proves both schemes. */
/* site v2 fonts (Archivo, Figtree, IBM Plex Mono; SIL OFL), self-hosted 2026-10-02, latin subset */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/fonts/site2-archivo-normal-500-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/site2-figtree-italic-400-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/site2-figtree-normal-400-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/site2-ibmplexmono-normal-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/site2-ibmplexmono-normal-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Layout concept: a platform that feels built, not decorated. Cream paper pages, dark leather bands that carry the
   gold mark, red only for the one action on each screen. Headings in a condensed modern grotesque, body text 18px+. */
:root {
  color-scheme: light;
  --cream: #f8f1e3;
  --paper: #fffaf0;
  --sand: #ead8b4;
  --line: #dcc69c;
  --bark: #2e1c11;
  --bark-2: #3d2617;
  --ink: #23180f;
  --muted: #6a5341;
  --gold: #e0ad45;
  --gold-soft: #f0cf86;
  --action: #b2321b;
  --action-dark: #8c2412;
  --focus: #1b5fa8;
  --ok: #2f7a3d;
  --demo: #ffd400;
  --brand: #5b3fd6;          /* the promoter's own primary, set per brand on ticket pages */
  --brand-ink: #ffffff;
  --brand-soft: var(--brand-soft-l, #ece8fb);
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Figtree", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r: 14px;
  /* ROLES (10/03, dark mode): a color that did two jobs is split, so a phone in dark mode can change one without the
     other. In light mode every role below is EXACTLY the color the rule used before, so the computer site is unchanged. */
  --heading: var(--bark);          /* headings and strong text on a light surface (bark also paints the dark bands) */
  --on-band: #fffaf0;              /* text on a dark leather band: the header, the ticketing band, the footer */
  --band-text: #ead8b4;            /* quieter text on a dark band */
  --foot-bg: var(--ink);
  --on-heading: #fffaf0;           /* text on a heading-colored fill (a ghost button's hover) */
  --foot-muted: #b9a284;
  --accent-text: var(--action-dark); /* links, kickers, "go" lines */
  --em: var(--action);             /* the one emphasized word in a big heading */
  --ok-text: var(--ok);
  --input-bg: #fff;
  --brand-text: var(--brand-text-l, var(--brand));   /* a brand color used AS TEXT (brand.js fills both schemes) */
  /* RESULT STATES (10/03, from the verify page): text, a border line and a soft fill for good / bad / warning.
     Every text-on-fill and text-on-paper pair measured 5.5:1 to 10.5:1 in both schemes. */
  --good-text: #1f6b32; --good-line: #2f7a3d; --good-fill: #e2f0df;
  --bad-text: #9e2414;  --bad-line: #b2321b;  --bad-fill: #f9e1da;
  --warn-text: #7a4f00; --warn-line: #c98a12; --warn-fill: #f6e5bd;
}
/* DARK MODE, PHONES ONLY (Paul 10/02 14:26: dark follows the phone's own setting, computers stay light). A touch
   screen whose setting is dark gets dark leather; a computer in dark mode keeps the cream site. Proven both ways by
   scripts/walk-site2-dark.mjs. Text roles are chosen to read at AA on --cream, --paper and --sand below. */
@media (prefers-color-scheme: dark) and (pointer: coarse) {
  :root {
    color-scheme: dark;
    --cream: #17100b;
    --paper: #231811;
    --sand: #33241a;
    --line: #4d3828;
    --bark: #0c0805;
    --bark-2: #2a1b11;
    --ink: #f3e8d4;
    --muted: #cdb698;
    --heading: #f7e9cc;
    --foot-bg: #0c0805;
    --on-heading: #17100b;
    --accent-text: #ff9f85;
    --em: #ff8a6b;
    --ok-text: #74d184;
    --focus: #7fb2ff;
    --input-bg: #17100b;
    --brand-text: var(--brand-text-d, #b9a8ff);
    --brand-soft: var(--brand-soft-d, #2a2340);
    --good-text: #7fd88e; --good-line: #4fae63; --good-fill: #1c3522;
    --bad-text: #ff9a85;  --bad-line: #e0573c;  --bad-fill: #45201a;
    --warn-text: #f2c35e; --warn-line: #d49a2a; --warn-fill: #3d2e14;
  }
}