/*
 * Design tokens.
 *
 * This file MUST be the first stylesheet linked in the layout: it declares the
 * cascade layer order, and a @layer statement only counts if it comes before
 * the layers it names. With the order fixed here, the remaining stylesheets can
 * be linked in any sequence without a specificity accident changing the result.
 *
 * ── The theme contract ────────────────────────────────────────────────────────
 * Every screen wears the colour of its game phase, in light or dark mode,
 * so the app tells you where you are in the week
 * before you have read a word: amber to drop, periwinkle to listen and vote,
 * crimson for the reveal, mint for anything about you.
 *
 * A theme sets six custom properties and nothing else:
 *
 *   --bg        page background
 *   --fg        foreground text
 *   --surf      raised surface (cards, sheets, inputs)
 *   --mark      accent mark: live dots, bar fills, cover placeholders
 *   --score-fg  numerals — points, countdowns, indices
 *   --acc       the phase accent: state-block rails, CTA fills, focus rings
 *   --on-acc    what reads ON --acc, for anything filled with it
 *
 * --on-acc exists because --acc is not always light. It is a mid-tone amber on
 * the drop theme but plain ink on the paper theme, so a component that filled
 * with --acc and hardcoded dark text on top rendered invisible on paper. Fill
 * with --acc, write with --on-acc, and the pair is correct in every theme.
 *
 * --line (hairlines) and --mut (secondary text) are DERIVED from --fg via
 * color-mix, so they can never drift out of sync with the foreground. A theme
 * that needs them louder or quieter overrides --line-strength / --mut-strength
 * rather than restating a colour.
 */

@layer reset, tokens, base, layout, components, screens, utilities;

@layer tokens {
  :root {
    /* Explicit account preference, not the OS setting. light-dark() selects the
       palette at the element where it is used, including native form controls. */
    color-scheme: only light;
    --user-color-scheme: only light;

    /* ── Brand palette ─────────────────────────────────────────────────────── */
    --canvas: #18130e;
    --ink: #1f1a14;
    --paper: #f4eee0;
    --beton: #bab3a3;
    --steel: #6e6757;

    /* Phase ramps: light surface, mid accent, dark text, deep contrast */
    --drop-light: #fcf0dd;
    --drop-mid: #eebe55;
    --drop-dark: #974320;
    --drop-deep: #6e2f12;

    --vote-light: #deddfc;
    --vote-mid: #9da7ea;
    --vote-dark: #383154;

    --reveal-light: #f4b6c3;
    --reveal-mid: #ec5e52;
    --reveal-dark: #530e36;

    --prof-light: #d7ffe9;
    --prof-mid: #96aa9f;
    --prof-dark: #1c423e;

    /* ── Semantic ──────────────────────────────────────────────────────────── */
    --score: #eebe55;
    --pass: light-dark(#3f7a57, #8dd6a5);
    --warn: light-dark(#c8862a, #efbd72);
    --fail: light-dark(#c0432f, #ff9e8e);
    --on-fail: light-dark(#fff, #32130d);

    /* Neutral furniture stays independent of the phase behind it. */
    --neutral-bg: light-dark(#f4eee0, #1c1b19);
    --neutral-fg: light-dark(#1f1a14, #f4eee0);
    --neutral-surf: light-dark(#fbf7ee, #292724);
    --sidebar-bg: light-dark(#ece5d5, #23211e);
    --result-edge: light-dark(#530e36, #ffadbe);
    --result-tint: light-dark(#f4b6c3, #602b3c);

    /* Spotify's colour carries through the connect button and playlist cards. */
    --spotify: #1db954;
    --spotify-ink: #06250f;

    /* ── Type ──────────────────────────────────────────────────────────────── */
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
    --font-serif: "Instrument Serif", Georgia, serif;

    /* Sizes are rem so they honour the reader's browser font-size setting.
       The mockup's fractional pixels (8.5, 9.5, 12.5) are rounded onto this
       scale — they were prototype drift, not intent. */
    --text-3xs: 0.5rem; /*  8px — densest mono meta */
    --text-2xs: 0.5625rem; /*  9px — section labels, tags */
    --text-xs: 0.625rem; /* 10px — mono values */
    --text-sm: 0.6875rem; /* 11px */
    --text-md: 0.75rem; /* 12px */
    --text-base: 0.8125rem; /* 13px — body copy */
    --text-lg: 0.875rem; /* 14px */
    --text-xl: 0.9375rem; /* 15px — CTA labels */
    --text-2xl: 1.0625rem; /* 17px */
    --text-3xl: 1.1875rem; /* 19px */

    /* Display sizes fluid between phone and laptop. The mockup pins these to
       fixed pixels because it renders in a fixed-width frame; the real app has
       to survive a 320px phone and a 27" monitor. */
    --display-sm: clamp(1.3125rem, 5vw, 1.5rem); /* 21 → 24 */
    --display-md: clamp(1.625rem, 6.5vw, 1.875rem); /* 26 → 30 */
    --display-lg: clamp(1.875rem, 8vw, 2.125rem); /* 30 → 34 */
    --display-xl: clamp(2.125rem, 10vw, 2.625rem); /* 34 → 42 */
    --display-2xl: clamp(2.5rem, 16vw, 4rem); /* reveal spotlight */

    /* Tracking. Display type is tightened, mono labels are opened right up —
       that contrast is the loudest signal in the whole design. */
    --track-display: -0.045em;
    --track-tight: -0.02em;
    --track-label: 0.14em;
    --track-label-wide: 0.16em;

    /* ── Space ─────────────────────────────────────────────────────────────── */
    --space-1: 0.25rem; /*  4px */
    --space-2: 0.375rem; /*  6px */
    --space-3: 0.5rem; /*  8px */
    --space-4: 0.6875rem; /* 11px */
    --space-5: 0.8125rem; /* 13px */
    --space-6: 1rem; /* 16px */
    --space-7: 1.375rem; /* 22px */
    --space-8: 1.75rem; /* 28px */
    --space-9: 2.25rem; /* 36px */

    /* ── Form ──────────────────────────────────────────────────────────────── */
    /* Every corner in this design is square. One knob, in case that ever
       changes; do not hardcode a radius anywhere else. */
    --radius: 0;
    --hairline: 1px;

    /* Shell metrics */
    --sidebar-width: 15.75rem; /* 252px */
    --reading-width: 43.75rem; /* 700px */
    --tap-target: 2.75rem; /* 44px — iOS minimum */

    /* Visible height of every masthead control — back button, account chip,
       flon switcher. They sit on one line, so they have to agree; the 44px
       touch target is added around this rather than baked into it. */
    --masthead-control: 1.875rem; /* 30px */

    /* Derivation strengths, overridable per theme (see the contract above) */
    --line-strength: 20%;
    --mut-strength: 55%;

    /* ── Motion ────────────────────────────────────────────────────────────── */
    --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
    --ease-sheet: cubic-bezier(0.2, 0.7, 0.3, 1);
    --dur-fast: 0.18s;
    --dur-base: 0.26s;
    --dur-slow: 0.34s;

    --z-sticky: 5;
    --z-scrim: 20;
    --z-sheet: 21;
    --z-toast: 30;
  }

  /* Body attributes are replaced by Turbo navigation, unlike <html>. Rendering
     the saved preference here also avoids a localStorage/JavaScript paint flash. */
  :root:has(> body[data-color-scheme="dark"]) {
    color-scheme: only dark;
    --user-color-scheme: only dark;
  }

  .sheet {
    color-scheme: var(--user-color-scheme);
  }

  /* ── Theme base ──────────────────────────────────────────────────────────── */
  /* Applied by [data-theme] on the screen root. Every theme inherits the two
     derived properties; none of them should restate --line or --mut. */
  :is([data-theme], .sheet, .shell__nav) {
    background: var(--bg);
    color: var(--fg);
    --line: color-mix(in srgb, var(--fg) var(--line-strength), transparent);
    --mut: color-mix(in srgb, var(--fg) var(--mut-strength), transparent);
  }

  /* Neutral — settings, rules, library, anything outside the game cycle */
  :is([data-theme="paper"], .sheet, .shell__nav) {
    --bg: var(--neutral-bg);
    --fg: var(--neutral-fg);
    --surf: var(--neutral-surf);
    --mark: light-dark(#6e6757, #bab3a3);
    --score-fg: light-dark(#974320, #eebe55);
    --acc: var(--neutral-fg);
    --on-acc: var(--neutral-bg);
    --line-strength: 18%;
    --mut-strength: 65%;
  }

  /* Dark — splash and full-bleed marketing */
  [data-theme="dark"] {
    color-scheme: only dark;
    --bg: var(--canvas);
    --fg: var(--paper);
    --surf: color-mix(in srgb, var(--paper) 5%, transparent);
    --mark: var(--drop-mid);
    --score-fg: var(--drop-mid);
    --acc: var(--drop-mid);
    --on-acc: var(--ink);
    --line-strength: 18%;
    --mut-strength: 72%;
  }

  /* Phase 01 — drop your track */
  [data-theme="drop"] {
    --bg: light-dark(var(--drop-light), #261c10);
    --fg: light-dark(var(--drop-dark), #f8dfb7);
    --surf: light-dark(rgb(255 255 255 / 42%), #362819);
    --mark: var(--drop-mid);
    --score-fg: light-dark(var(--drop-dark), var(--drop-mid));
    --acc: var(--drop-mid);
    --on-acc: var(--drop-deep);
    --line-strength: 28%;
    --mut-strength: 88%;
  }

  /* Phase 02 — listen and vote */
  [data-theme="vote"] {
    --bg: light-dark(var(--vote-light), #1d1c30);
    --fg: light-dark(var(--vote-dark), #e6e4ff);
    --surf: light-dark(rgb(255 255 255 / 50%), #2b2943);
    --mark: var(--vote-mid);
    --score-fg: light-dark(var(--vote-dark), #b8bffa);
    --acc: var(--vote-mid);
    --on-acc: var(--vote-dark);
    --line-strength: 28%;
    --mut-strength: 75%;
  }

  /* Phase 03 — already dark in the original palette: results land at midnight. */
  [data-theme="reveal"] {
    color-scheme: only dark;
    --bg: var(--reveal-dark);
    --fg: #fceaea;
    --surf: rgb(255 255 255 / 8%);
    --mark: var(--reveal-mid);
    --score-fg: var(--score);
    --acc: var(--reveal-mid);
    --on-acc: #32130d;
    --line-strength: 26%;
    --mut-strength: 70%;
  }

  /* You — player home, account, affinities, anything personal */
  [data-theme="prof"] {
    --bg: light-dark(var(--prof-light), #142623);
    --fg: light-dark(var(--prof-dark), #d7ffe9);
    --surf: light-dark(rgb(255 255 255 / 45%), #203833);
    --mark: var(--prof-mid);
    --score-fg: light-dark(var(--prof-dark), #b4e9cd);
    --acc: var(--prof-mid);
    --on-acc: var(--prof-dark);
    --line-strength: 26%;
    --mut-strength: 74%;
  }

  /* Readers who ask for more contrast get solid hairlines and louder secondary
     text; the derivation means this is two lines rather than six themes. */
  @media (prefers-contrast: more) {
    :is([data-theme], .sheet, .shell__nav) {
      --line-strength: 55%;
      --mut-strength: 85%;
    }
  }
}