/* ============================================================================
   Deck design tokens
   ----------------------------------------------------------------------------
   One token set, two themes. Theme resolution order (later wins):

     1. :root                          — light (base)
     2. @media (prefers-color-scheme: dark) :root
                                       — dark, follows the OS
     3. :root[data-theme="light"] /
        :root[data-theme="dark"]       — manual toggle; higher specificity than
                                         both blocks above, so it wins in BOTH
                                         directions regardless of the OS theme.

   The gray scale used to be pure neutral (zero hue) so that no chrome tint
   could color-cast the human photos that dominate this UI. It is now warm —
   paper, not gray — and that reversal was measured before it was made:

     · The tint is OKLCh C=0.0074 @81° (#f6f3ee) against the old C=0.0000.
       Below ~0.01 a large field reads as neutral; this is under that.
     · Tested on eight real Hinge photos across skin tones, in a split rig
       where one half of the surround is neutral and the other warm and the
       photo spans the seam — the most sensitive arrangement for simultaneous
       contrast. No visible discontinuity in skin, in either theme.
     · Positive control: pushed to C=0.0353 (5x, an obviously beige field)
       the seam still induced no visible shift — so the null result is the
       tint being weak, not the rig being blind.

   The original concern stands as a rule: do not tint chrome far enough to
   cast the photos. This palette simply sits well under that line. If anyone
   pushes the neutrals toward C>0.02, re-run that test first.

   The semantic colors (--like/--pass/--superlike/--ok/--warn/--danger) and
   every *-on-scrim value are deliberately NOT warmed: they were tuned to
   specific contrast ratios against the scrim, and hue-shifting them for
   looks would quietly spend that margin.

   The brand accent (--hinge) is an identity color ONLY: the top-bar rule and
   the card corner tag. It must never be used as a component fill — that job
   belongs to the semantic colors.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- warm paper/ink primitives (see the header note for the test) -----
     One hue family (~80deg), chroma held under 0.013 all the way down the
     scale so no step crosses the cast threshold. Names are unchanged, so the
     component layer reskins without touching a single selector. */
  --gray-0: #fdfcfa;
  --gray-50: #faf8f4;
  --gray-100: #f6f3ee;
  --gray-150: #efeae2;
  --gray-200: #e5dfd4;
  --gray-300: #cfc7b9;
  --gray-400: #9e968a;
  --gray-500: #6f6960;
  --gray-600: #4d4842;
  --gray-700: #383430;
  --gray-800: #282521;
  --gray-850: #1f1c19;
  --gray-900: #191512;
  --gray-950: #14120f;

  /* ---- spacing (4px base) ----------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- radius ----------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* ---- motion (120–180ms band) ------------------------------------------ */
  --dur-1: 120ms;
  --dur-2: 160ms;
  --dur-3: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- typography ------------------------------------------------------- */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
    "Helvetica Neue", Arial, sans-serif;
  /* Display face for names and page titles. `ui-serif` resolves to New York
     on Apple platforms — Apple's own serif, drawn to pair with SF, so this
     stays native rather than pulling a webfont. CJK falls through to the
     system's Song/Ming, which is the right pairing for it. */
  --font-serif:
    ui-serif, "New York", Georgia, "Songti SC", "Source Han Serif SC",
    "Times New Roman", serif;
  --font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  --fs-xs: 0.72rem;     /* chips, badges, meta            */
  --fs-sm: 0.8125rem;   /* secondary text, controls       */
  --fs-md: 0.875rem;    /* body                           */
  --fs-base: 0.9375rem; /* primary body / buttons         */
  --fs-lg: 1.0625rem;   /* card names, section heads      */
  --fs-xl: 1.25rem;     /* dialog titles                  */
  --fs-2xl: 1.5rem;     /* focus-mode name                */

  --lh-tight: 1.25;
  --lh-normal: 1.5;

  /* ---- photo scrim (theme-invariant: always sits on a photo) ------------ */
  --scrim: rgba(8, 8, 8, 0.88);
  --scrim-chip: rgba(12, 12, 12, 0.55);
  /* Chips carrying saturated brand text need a denser backdrop: a bright photo
     showing through a 0.55 scrim drops small accent-colored text under 4.5:1.
     At 0.78 both brand accents clear 5:1 even over a pure-white photo. */
  --scrim-chip-strong: rgba(10, 10, 10, 0.78);
  --scrim-text: #ffffff;

  /* Brand accents legible ON a photo scrim. Always the light tints, in both
     themes, because the backdrop here is the scrim rather than the page. */
  --hinge-on-scrim: #e8b3d8;

  /* Semantic colors legible ON a photo scrim. The page-level --like/--danger/
     --ok are tuned for a page background; over a bright photo behind a scrim
     they land near 1.2:1. These tints clear 4.5:1 against --scrim-chip-strong. */
  --like-on-scrim: #ff8fb8;
  --danger-on-scrim: #ff9a94;
  --ok-on-scrim: #7bd9a8;
  --superlike-on-scrim: #74c8f0;
  --warn-on-scrim: #f2c063;
}

/* ============================================================================
   Light theme (base + manual override).
   Grouping the manual selector here means light is written exactly once.
   ========================================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg: var(--gray-50);
  --surface: var(--gray-0);
  --surface-2: var(--gray-100);
  --surface-3: var(--gray-150);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);

  --text: var(--gray-900);   /* ink, not black — pure #000/#1a1a1a now reads
                                cold against the paper it sits on */
  --text-2: var(--gray-600);
  --text-3: var(--gray-500);
  --text-4: var(--gray-400);
  --muted: var(--text-3);

  /* provider identity — never a fill */
  --hinge: #9c3f34;           /* 赭红 ochre-claret — reads as ink on paper */
  --hinge-soft: rgba(156, 63, 52, 0.09);

  /* semantic */
  --like: #c92a6d;
  --like-soft: #fae6ee;
  /* "pass" is the deliberately neutral semantic — point it at the scale so it
     tracks the family instead of drifting into a cold gray of its own. */
  --pass: var(--gray-500);
  --pass-soft: var(--gray-150);
  --superlike: #0b7fc2;
  --superlike-soft: #e4f2fb;
  --ok: #1f7d4d;
  --ok-soft: #e4f3ea;
  --warn: #9a6700;
  --warn-soft: #faf0da;
  --danger: #c33636;
  --danger-soft: #fbe7e7;

  --focus-ring: #2f6fe4;

  --elev-1: 0 1px 2px rgba(17, 17, 17, 0.05), 0 1px 3px rgba(17, 17, 17, 0.06);
  --elev-2: 0 4px 14px rgba(17, 17, 17, 0.09);
  --elev-3: 0 16px 44px rgba(17, 17, 17, 0.18);
}

/* ============================================================================
   Dark theme — OS preference. Keep in sync with :root[data-theme="dark"].
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: var(--gray-950);
    --surface: var(--gray-850);
    --surface-2: var(--gray-800);
    --surface-3: var(--gray-700);
    --border: #2f2b26;
    --border-strong: #474139;

    --text: #f0ece5;
    --text-2: #c6bfb4;
    --text-3: #968e83;
    --text-4: #767065;
    --muted: var(--text-3);

    --hinge: #d4796a;
    --hinge-soft: rgba(212, 121, 106, 0.13);

    --like: #ff6f9f;
    --like-soft: rgba(255, 111, 159, 0.16);
    --pass: #968e83;
    --pass-soft: rgba(150, 142, 131, 0.14);
    --superlike: #55b9ee;
    --superlike-soft: rgba(85, 185, 238, 0.14);
    --ok: #5cc389;
    --ok-soft: rgba(92, 195, 137, 0.14);
    --warn: #d9a63e;
    --warn-soft: rgba(217, 166, 62, 0.14);
    --danger: #f26d6d;
    --danger-soft: rgba(242, 109, 109, 0.14);

    --focus-ring: #7aa7ff;

    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --elev-2: 0 4px 14px rgba(0, 0, 0, 0.5);
    --elev-3: 0 16px 44px rgba(0, 0, 0, 0.6);
  }
}

/* ============================================================================
   Dark theme — manual override. Must stay identical to the media block above.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--gray-950);
  --surface: var(--gray-850);
  --surface-2: var(--gray-800);
  --surface-3: var(--gray-700);
  --border: #2f2b26;
  --border-strong: #474139;

  --text: #f0ece5;
  --text-2: #c6bfb4;
  --text-3: #968e83;
  --text-4: #767065;
  --muted: var(--text-3);

  --hinge: #d4796a;
  --hinge-soft: rgba(212, 121, 106, 0.13);

  --like: #ff6f9f;
  --like-soft: rgba(255, 111, 159, 0.16);
  --pass: #968e83;
  --pass-soft: rgba(150, 142, 131, 0.14);
  --superlike: #55b9ee;
  --superlike-soft: rgba(85, 185, 238, 0.14);
  --ok: #5cc389;
  --ok-soft: rgba(92, 195, 137, 0.14);
  --warn: #d9a63e;
  --warn-soft: rgba(217, 166, 62, 0.14);
  --danger: #f26d6d;
  --danger-soft: rgba(242, 109, 109, 0.14);

  --focus-ring: #7aa7ff;

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --elev-2: 0 4px 14px rgba(0, 0, 0, 0.5);
  --elev-3: 0 16px 44px rgba(0, 0, 0, 0.6);
}