/*
  Marquee design system 1.0.0 tokens.
  Every custom property starts with --mq-. Light is the default; dark follows the visitor's system
  setting unless <html data-theme="light|dark"> overrides it. Accent presets switch with
  <html data-accent="acid|tangerine"> and change the loud color, accent text and button tokens only.

  Two kinds of ground: paper sections (off-white, charcoal in dark mode) and night bands (always black).
  Add .mq-night to a section and every component inside reads the --mq-night-* values instead.
  The loud color (hot coral) is a fill behind black type, never a text color on paper.
  Text pairs target 7:1 and never fall below 4.5:1. Measured values live in DESIGN.md section 4.
*/

:root {
  color-scheme: light;

  /* Paper: the light sections */
  --mq-paper: #f3efe7;            /* page ground: warm off-white, like poster stock */
  --mq-paper-2: #e9e3d8;          /* alternate sections, wells, table heads */
  --mq-surface: #fbf9f5;          /* cards, inputs, dialogs, ticket stock on paper */
  --mq-ink: #0d0c0b;              /* headings, display stacks, strong labels */
  --mq-body: #22201c;             /* running text */
  --mq-muted: #4a443d;            /* warm gray metadata: rooms, times, captions */
  --mq-rule: #d3cbbd;             /* hairlines (decorative) */
  --mq-control: #776f63;          /* borders that mark a control: inputs, checkboxes, meters */

  /* Night: the black bands (nav, poster hero, ticket booth, footer). Fixed in both themes except depth. */
  --mq-night: #0d0c0b;
  --mq-night-2: #1a1816;          /* raised panels on night */
  --mq-night-3: #26231f;          /* wells and tracks on night */
  --mq-night-ink: #f6f2ea;
  --mq-night-body: #e3ddd1;
  --mq-night-muted: #b8b1a5;
  --mq-night-rule: #3b3732;
  --mq-night-control: #8f887c;
  --mq-night-accent: #ff8f84;     /* accent text on night */
  --mq-night-focus: #ff6f60;      /* focus ring on night */

  /* Stock: the card a ticket is printed on. It keeps its own values inside night and loud bands. */
  --mq-stock: #fffdf8;
  --mq-stock-2: #f1ebe0;          /* the stub */
  --mq-stock-ink: #0d0c0b;
  --mq-stock-body: #22201c;
  --mq-stock-muted: #4a443d;
  --mq-stock-rule: #cbc2b2;
  --mq-stock-control: #776f63;

  /* Loud: hot coral, a fill behind black type (buttons, marks, track one, the CTA band) */
  --mq-loud: #ff6f60;
  --mq-loud-hover: #ff8a7d;
  --mq-loud-ink: #0d0c0b;
  --mq-loud-soft: #ffe1dc;        /* tint for highlighted rows and callouts */
  --mq-accent: #8c1d14;           /* coral ink: the only accent allowed as small text on paper */
  --mq-btn: #ff6f60;
  --mq-btn-hover: #ff8a7d;
  --mq-btn-ink: #0d0c0b;
  --mq-focus: #0d0c0b;

  /* Aqua: track two in the schedule, a fill behind black type or a large color on night */
  --mq-aqua: #33e1d2;
  --mq-aqua-ink: #0d0c0b;
  --mq-aqua-soft: #d4f5f0;

  /* Preset previews for the accent switcher (fixed, not themed) */
  --mq-swatch-coral: #ff6f60;
  --mq-swatch-acid: #c8f03c;
  --mq-swatch-tangerine: #ff9a2e;

  /* Status */
  --mq-ok: #134d2b;
  --mq-ok-soft: #ddeedd;
  --mq-warn: #6b4300;
  --mq-warn-soft: #f6e7c8;
  --mq-danger: #8c0f24;
  --mq-danger-soft: #f9dde0;
  --mq-overlay: rgba(13, 12, 11, 0.62);

  /* Data viz: categorical (3:1 or better on paper, paper-2 and surface; lightness alternates) */
  --mq-viz-1: #d63b2c;
  --mq-viz-2: #2a2723;
  --mq-viz-3: #0b7d73;
  --mq-viz-4: #a26a00;
  --mq-viz-5: #2f5f93;
  --mq-viz-6: #857c70;
  /* Sequential (coral, light to dark) and diverging (aqua, paper, coral) */
  --mq-seq-1: #ffe3de;
  --mq-seq-2: #ffb3a9;
  --mq-seq-3: #ff7c6f;
  --mq-seq-4: #d63b2c;
  --mq-seq-5: #8c1d14;
  --mq-div-1: #0b7d73;
  --mq-div-2: #8fd9cf;
  --mq-div-3: #e9e3d8;
  --mq-div-4: #ffa59b;
  --mq-div-5: #d63b2c;

  /* Type faces: Big Shoulders for display stacks, numerals and button labels; Schibsted Grotesk for reading */
  --mq-font-display: "Big Shoulders", ui-sans-serif, system-ui, sans-serif;
  --mq-font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mq-font-mono: ui-monospace, Consolas, "Liberation Mono", monospace;

  /* Type ladder (display sizes are uppercase Big Shoulders) */
  --mq-fs-poster: clamp(6rem, 37vw - 0.5rem, 16rem);          /* 130 to 256px: the home poster stack (poster-hero rescales it beside the side column) */
  --mq-fs-display: clamp(3.75rem, 2.2rem + 6.6vw, 8rem);        /* 60 to 128px: page h1 stacks */
  --mq-fs-title: clamp(2.75rem, 1.95rem + 3.4vw, 5rem);         /* 44 to 80px: h2 */
  --mq-fs-headline: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);   /* 30 to 44px: h3, prices, speaker names */
  --mq-fs-numeral: clamp(3rem, 2.2rem + 3.4vw, 5.5rem);         /* 48 to 88px: stats, countdown, stub prices */
  --mq-fs-card: 1.25rem;                                        /* 20px: card and session titles (Schibsted) */
  --mq-fs-lede: clamp(1.1875rem, 1.08rem + 0.45vw, 1.4375rem);  /* 19 to 23px */
  --mq-fs-read: 1.1875rem;                                      /* 19px: article text */
  --mq-fs-body: 1.0625rem;                                      /* 17px: running text */
  --mq-fs-btn: 1.1875rem;                                       /* 19px: Big Shoulders button labels */
  --mq-fs-ui: 0.9375rem;                                        /* 15px: nav, form labels */
  --mq-fs-meta: 0.875rem;                                       /* 14px: times, rooms, captions */
  --mq-fs-label: 0.8125rem;                                     /* 13px: tracked caps labels below headings */

  --mq-weight-regular: 400;
  --mq-weight-medium: 500;
  --mq-weight-semibold: 600;
  --mq-weight-bold: 700;
  --mq-weight-heavy: 800;

  --mq-lh-poster: 0.82;
  --mq-lh-display: 0.86;
  --mq-lh-title: 0.9;
  --mq-lh-headline: 0.96;
  --mq-lh-snug: 1.25;
  --mq-lh-ui: 1.35;
  --mq-lh-lede: 1.45;
  --mq-lh-body: 1.6;
  --mq-lh-read: 1.68;

  --mq-track-poster: -0.01em;
  --mq-track-display: -0.005em;
  --mq-track-title: 0em;
  --mq-track-btn: 0.04em;
  --mq-track-label: 0.14em;

  /* Space: 4px base */
  --mq-space-1: 4px;
  --mq-space-2: 8px;
  --mq-space-3: 12px;
  --mq-space-4: 16px;
  --mq-space-5: 24px;
  --mq-space-6: 32px;
  --mq-space-7: 48px;
  --mq-space-8: 64px;
  --mq-space-9: 96px;
  --mq-space-10: 128px;
  --mq-section-pad: clamp(4rem, 2.6rem + 6vw, 8rem);           /* 64 to 128px */

  /* Layout */
  --mq-page: 86rem;               /* 1376px poster sheet */
  --mq-measure: 42rem;            /* 672px reading column */
  --mq-gutter: clamp(1rem, 0.35rem + 2.8vw, 2.75rem);
  --mq-nav-h: 72px;

  /* Shape: square buttons, near-square cards, notched tickets, pill track tags */
  --mq-radius-btn: 0px;
  --mq-radius-input: 0px;
  --mq-radius-card: 2px;
  --mq-radius-ticket: 4px;
  --mq-radius-tag: 999px;
  --mq-notch: 16px;               /* radius of a ticket's tear-line notch */
  --mq-perf: 9px;                 /* radius of a band's perforation bite */
  --mq-perf-step: 28px;           /* distance between bites */
  --mq-line-hair: 1px;
  --mq-line: 2px;
  --mq-line-heavy: 4px;
  --mq-stamp: 6px;                /* offset of the hard poster shadow */

  /* Elevation: flat by default; the stamp shadow is drawn with the current ink */
  --mq-shadow-stamp: 6px 6px 0 0 #0d0c0b;
  --mq-shadow-float: 0 2px 0 rgba(13, 12, 11, 0.08), 0 24px 48px -20px rgba(13, 12, 11, 0.45);

  /* Motion */
  --mq-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mq-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --mq-dur-fast: 120ms;
  --mq-dur: 200ms;
  --mq-dur-slow: 560ms;
  --mq-ticker-dur: 48s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mq-paper: #201f1c;
    --mq-paper-2: #2a2825;
    --mq-surface: #262420;
    --mq-ink: #f6f2ea;
    --mq-body: #e2dccf;
    --mq-muted: #bdb5a9;
    --mq-rule: #3c3833;
    --mq-control: #8f887c;
    --mq-night: #070707;
    --mq-night-2: #141312;
    --mq-night-3: #1f1d1b;
    --mq-stock: #2e2b27;
    --mq-stock-2: #38342f;
    --mq-stock-ink: #f6f2ea;
    --mq-stock-body: #e2dccf;
    --mq-stock-muted: #cfc8bc;
    --mq-stock-rule: #4c4741;
    --mq-stock-control: #9a9286;
    --mq-stock: #2e2b27;
  --mq-stock-2: #38342f;
  --mq-stock-ink: #f6f2ea;
  --mq-stock-body: #e2dccf;
  --mq-stock-muted: #cfc8bc;
  --mq-stock-rule: #4c4741;
  --mq-stock-control: #9a9286;
  --mq-loud-soft: #3e231f;
    --mq-accent: #ff9a8f;
    --mq-focus: #ff6f60;
    --mq-aqua-soft: #173a37;
    --mq-ok: #8bd3a2;
    --mq-ok-soft: #18291e;
    --mq-warn: #f0bb5e;
    --mq-warn-soft: #2f2615;
    --mq-danger: #ff9aa3;
    --mq-danger-soft: #3a1c20;
    --mq-overlay: rgba(0, 0, 0, 0.72);
    --mq-viz-1: #ff7a6e;
    --mq-viz-2: #f1ebe0;
    --mq-viz-3: #36d6c7;
    --mq-viz-4: #f2b84b;
    --mq-viz-5: #6fa4e0;
    --mq-viz-6: #a39a8d;
    --mq-seq-1: #3e231f;
    --mq-seq-2: #74342b;
    --mq-seq-3: #b84a3e;
    --mq-seq-4: #ff7a6e;
    --mq-seq-5: #ffc4bc;
    --mq-div-1: #36d6c7;
    --mq-div-2: #1f6f68;
    --mq-div-3: #34312c;
    --mq-div-4: #a8483d;
    --mq-div-5: #ff7a6e;
    --mq-shadow-stamp: 6px 6px 0 0 #070707;
    --mq-shadow-float: 0 2px 0 rgba(0, 0, 0, 0.3), 0 24px 52px -18px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --mq-paper: #201f1c;
  --mq-paper-2: #2a2825;
  --mq-surface: #262420;
  --mq-ink: #f6f2ea;
  --mq-body: #e2dccf;
  --mq-muted: #bdb5a9;
  --mq-rule: #3c3833;
  --mq-control: #8f887c;
  --mq-night: #070707;
  --mq-night-2: #141312;
  --mq-night-3: #1f1d1b;
  --mq-stock: #2e2b27;
  --mq-stock-2: #38342f;
  --mq-stock-ink: #f6f2ea;
  --mq-stock-body: #e2dccf;
  --mq-stock-muted: #cfc8bc;
  --mq-stock-rule: #4c4741;
  --mq-stock-control: #9a9286;
  --mq-loud-soft: #3e231f;
  --mq-accent: #ff9a8f;
  --mq-focus: #ff6f60;
  --mq-aqua-soft: #173a37;
  --mq-ok: #8bd3a2;
  --mq-ok-soft: #18291e;
  --mq-warn: #f0bb5e;
  --mq-warn-soft: #2f2615;
  --mq-danger: #ff9aa3;
  --mq-danger-soft: #3a1c20;
  --mq-overlay: rgba(0, 0, 0, 0.72);
  --mq-viz-1: #ff7a6e;
  --mq-viz-2: #f1ebe0;
  --mq-viz-3: #36d6c7;
  --mq-viz-4: #f2b84b;
  --mq-viz-5: #6fa4e0;
  --mq-viz-6: #a39a8d;
  --mq-seq-1: #3e231f;
  --mq-seq-2: #74342b;
  --mq-seq-3: #b84a3e;
  --mq-seq-4: #ff7a6e;
  --mq-seq-5: #ffc4bc;
  --mq-div-1: #36d6c7;
  --mq-div-2: #1f6f68;
  --mq-div-3: #34312c;
  --mq-div-4: #a8483d;
  --mq-div-5: #ff7a6e;
  --mq-shadow-stamp: 6px 6px 0 0 #070707;
  --mq-shadow-float: 0 2px 0 rgba(0, 0, 0, 0.3), 0 24px 52px -18px rgba(0, 0, 0, 0.8);
}

/* Accent preset: acid (acid lime fills behind black type) */
:root[data-accent="acid"] {
  --mq-loud: #c8f03c;
  --mq-loud-hover: #d6f76a;
  --mq-loud-soft: #eef6d2;
  --mq-accent: #334a00;
  --mq-btn: #c8f03c;
  --mq-btn-hover: #d6f76a;
  --mq-btn-ink: #0d0c0b;
  --mq-focus: #0d0c0b;
  --mq-night-accent: #d4f56a;
  --mq-night-focus: #c8f03c;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="acid"]:not([data-theme="light"]) {
    --mq-loud: #c8f03c;
    --mq-loud-hover: #d6f76a;
    --mq-loud-soft: #222a0d;
    --mq-accent: #d4f56a;
    --mq-btn: #c8f03c;
    --mq-btn-hover: #d6f76a;
    --mq-btn-ink: #0d0c0b;
    --mq-focus: #c8f03c;
    --mq-night-accent: #d4f56a;
    --mq-night-focus: #c8f03c;
  }
}

:root[data-accent="acid"][data-theme="dark"] {
  --mq-loud: #c8f03c;
  --mq-loud-hover: #d6f76a;
  --mq-loud-soft: #222a0d;
  --mq-accent: #d4f56a;
  --mq-btn: #c8f03c;
  --mq-btn-hover: #d6f76a;
  --mq-btn-ink: #0d0c0b;
  --mq-focus: #c8f03c;
  --mq-night-accent: #d4f56a;
  --mq-night-focus: #c8f03c;
}

/* Accent preset: tangerine (a ripe orange fill behind black type) */
:root[data-accent="tangerine"] {
  --mq-loud: #ff9a2e;
  --mq-loud-hover: #ffb05c;
  --mq-loud-soft: #ffe8cf;
  --mq-accent: #763800;
  --mq-btn: #ff9a2e;
  --mq-btn-hover: #ffb05c;
  --mq-btn-ink: #0d0c0b;
  --mq-focus: #0d0c0b;
  --mq-night-accent: #ffb35e;
  --mq-night-focus: #ff9a2e;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="tangerine"]:not([data-theme="light"]) {
    --mq-loud: #ff9a2e;
    --mq-loud-hover: #ffb05c;
    --mq-loud-soft: #32220f;
    --mq-accent: #ffb35e;
    --mq-btn: #ff9a2e;
    --mq-btn-hover: #ffb05c;
    --mq-btn-ink: #0d0c0b;
    --mq-focus: #ff9a2e;
    --mq-night-accent: #ffb35e;
    --mq-night-focus: #ff9a2e;
  }
}

:root[data-accent="tangerine"][data-theme="dark"] {
  --mq-loud: #ff9a2e;
  --mq-loud-hover: #ffb05c;
  --mq-loud-soft: #32220f;
  --mq-accent: #ffb35e;
  --mq-btn: #ff9a2e;
  --mq-btn-hover: #ffb05c;
  --mq-btn-ink: #0d0c0b;
  --mq-focus: #ff9a2e;
  --mq-night-accent: #ffb35e;
  --mq-night-focus: #ff9a2e;
}