/* === TOKEN CONTRACT ===
   Primary tokens: every theme overrides EXACTLY these 13.
   Derived tokens: computed once here via color-mix(); NEVER redefined per theme.
   Exception: Highlander additionally sets --card-back-image (tartan).
   All other tokens are derived — do not add per-theme overrides for them. */

:root {
  /* --- 13 PRIMARY TOKENS (felt theme defaults) --- */
  --bg:          #e8e4dc;
  --paper:       #fafaf6;
  --ink:         #1f2722;
  --ink-soft:    #4a5752;
  --felt-mid:    #4f6b5e;
  --card-bg:     #ffffff;
  --card-border: #e0ddd4;
  --red:         #d65555;
  --spade:       #1f2722;
  --accent:      #d4a04a;
  --team-ns:     #4a7c5a;
  --team-ew:     #9c6b50;
  /* Warning amber — used by the SeatChip three-tier countdown ring's
     mid-stage (--warn) and any future "caution but not urgent" UI.
     Tokenized so theme overrides can audit contrast against their
     paper/chip backgrounds; previously only an inline #f59e0b fallback
     painted (Sauron SAUR-WARN-6). */
  --amber:       #f59e0b;

  /* Sprint 12 contrast audit — paper-aware "danger" text color. For
     light paper themes (the default; cream/white), the cancel/danger
     button text should be DARKENED red to lift contrast over the
     light bg. For dark paper themes (hot-spades) the same rule
     would make the text vanish, so dark-paper themes override this
     token to a brightened red. Used by .drawer-btn--cancel etc. */
  --danger-text:     color-mix(in oklab, var(--red) 65%, black);

  /* --- DERIVED TOKENS (contract — do not override per theme) --- */
  --felt-deep:       color-mix(in oklab, var(--felt-mid) 70%, black);
  --felt-light:      color-mix(in oklab, var(--felt-mid) 65%, white);
  --accent-soft:     color-mix(in oklab, var(--accent) 32%, transparent);
  --ink-dim:         color-mix(in oklab, var(--ink) 55%, var(--paper));
  --card-dim-bg:     color-mix(in oklab, var(--card-bg) 82.5%, #000);
  --card-dim-red:    color-mix(in oklab, var(--red) 77.5%, #000);
  --card-dim-spade:  color-mix(in oklab, var(--spade) 77.5%, var(--card-dim-bg));
  --shadow-1:        0 1px 3px color-mix(in oklab, black 12%, transparent);
  --shadow-2:        0 4px 16px color-mix(in oklab, black 6%, transparent);
  --radius-card:     10px;
  --radius-felt:     clamp(32px, 4vw, 64px);
  --line:            0.5px solid color-mix(in oklab, black 10%, transparent);

  /* Fluid card width — opponent hands, trick pile, other card surfaces */
  --card-w: clamp(36px, 4.6vw, 132px); /* cap raised: 84→132 so cards stay ~4.6% at 4K */

  /* Hand card width — wider plateau for readability; trick pile derives as 80% of this.
     Bumped (56→68 floor / 14→16vw / 100→118 cap) alongside the arc-fan
     layout in Hand.js: bigger cards + arc geometry = far higher tap
     legibility. Trick-pile cards stay at 80% so the center stack
     scales with this but doesn't blow out. */
  --hand-cw: clamp(68px, 16vw, 118px); /* floor@≤425, linear 425→738, cap@≥738; trick-pile = 80% */

  /* Accessibility: ink color ON team-colored backgrounds (WCAG AA). Override per theme when team color is light. */
  --ink-on-team-ns: #fff;
  --ink-on-team-ew: #fff;

  /* Team name text ON paper background. Defaults to raw team color; override on light-paper themes to pass AA-normal. */
  --name-on-paper-ns: var(--team-ns);
  --name-on-paper-ew: var(--team-ew);

  /* BidPip state colors. Trick-progress dots on every SeatChip:
     blue while under bid (every captured trick that hasn't yet
     reached the contract), green when made (every dot once the
     contract is met or exceeded), red for bag dots (any trick
     past the contract). Themes can override the three vars below
     where their palette has a more on-theme blue/green/red.
     The fallback team-color rendering retired Sprint 14 Phase F.2
     because the under/made/bag semantic carries more information
     than which team owns the chip — and team identity is already
     conveyed by the chip's .seat-chip--team-ns / --team-ew class. */
  --bid-pip-under: #3b82f6;  /* blue */
  --bid-pip-made:  #22c55e;  /* green */
  --bid-pip-bag:   #ef4444;  /* red */

  /* Bot identity border (silver). Stays silver across themes because
     a themed-silver bot border would dilute the "definitely a bot"
     read. Urukhai-3 Wave 2 extracted from a hardcoded #c0c0c0 in
     components.css (.seat-chip__avatar--bot) so themes that want a
     darker / lighter silver ring can override at the theme layer
     without forking the .seat-chip rule. The mobile mirror lives in
     C:\\spades-mobile\\src\\theme.js (theme.tokens.botBorder); keep
     in lockstep. */
  --bot-border: #c0c0c0;

  /* Sprint 12 — per-card emblem card back.
     Two-layer architecture (see .card--back::before + ::after in
     components.css):
       Layer 1 (background-image): bespoke per-theme full-color SVG
         art when set, otherwise `none`.
       Layer 2 (mask-image): silhouette SVG used as a mask on
         ::after; the ::after's --card-emblem-color fill shows only
         where the mask is opaque. Default mask = the spade-frame
         emblem below; palettes/themes that ship bespoke art override
         --card-back-mask to none so layer 2 doesn't paint over layer 1.

     --shared-card-back-mask is the canonical default mask URL —
     palettes that opt INTO the default emblem reference this token
     (instead of duplicating the inline SVG in every palette file).

     The mask uses white shapes (= fully opaque); stroke-opacity 0.6
     on the inner border yields 60% accent for the hairline. */
  --shared-card-back-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 144'%3E%3Crect x='4' y='4' width='92' height='136' rx='8' fill='none' stroke='white' stroke-width='2.5'/%3E%3Crect x='10' y='10' width='80' height='124' rx='5' fill='none' stroke='white' stroke-width='0.8' stroke-opacity='0.6'/%3E%3Ctext x='50' y='95' font-family='Georgia, serif' font-size='78' text-anchor='middle' fill='white'%3E%E2%99%A0%3C/text%3E%3C/svg%3E");

  --card-back-image: none;
  --card-back-size:  100% 100%;
  --card-back-repeat: no-repeat;
  --card-back-position: center;
  --card-back-mask: var(--shared-card-back-mask);
}

/* Sprint 8 Lane 3 — per-cardBack image overrides.
 *
 * Contract: each themePrefs.cardBack slug points at a static SVG under
 * /assets/card-backs/. The selector is the body data attribute the
 * cardBack hook writes. Theme CSS files MAY further override these
 * inside their own selectors — e.g.,
 *   body[data-theme="tartan"][data-card-back="classic"] —
 * to swap a tartan-tinted classic back. The defaults below cover every
 * (any theme, any back) combination so the picker is always usable.
 *
 * Sprint 13 note: previously the per-theme override used the
 * data-theme-palette attribute on a separate Sprint-8 axis; that axis
 * is retired and all 23 themes (11 legacy + 5 palettes + 7 throwback-game themes from Sprint 14 Phase F) now live on body[data-theme]. The
 * data-card-back axis is intentionally kept orthogonal — card-back
 * choice is a user preference independent of theme.
 *
 * --card-back-size is set to 100% so the SVG scales to the card box
 * (it has its own intrinsic 100×140 viewBox; the 1.45 aspect ratio
 * matches .card so there's no letterboxing). */
body[data-card-back="8bit"] {
  --card-back-image: url("/assets/card-backs/8bit.svg");
  --card-back-size: 100% 100%;
}
body[data-card-back="classic"] {
  --card-back-image: url("/assets/card-backs/classic.svg");
  --card-back-size: 100% 100%;
}
body[data-card-back="modern"] {
  --card-back-image: url("/assets/card-backs/modern.svg");
  --card-back-size: 100% 100%;
}