/* ═══════════════════════════════════════════════════════════
   Medieval Solutions — Design Tokens
   Dark  : Midnight Stage  (default / :root)
   Light : Cathedral Stained Glass  (html[data-theme="light"])
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --bg:         #060208;   /* inkwell black */
  --surf:       #120a10;   /* main panel */
  --surf2:      #20101c;   /* action bars, secondary panels — clear step above surf */
  --surf3:      #2c1628;   /* hover / active state */
  --dark-elem:  #09040c;   /* .dark modifier (Troubler screens) */

  /* ── Borders — crisper, more visible against near-black ── */
  --brd:        #481a32;   /* standard border */
  --brd2:       #6e2848;   /* accent border — card rings, focus */

  /* ── Text — raised for legibility; hierarchy clearly perceptible ── */
  --tx:         #eedcb0;   /* primary — bright cream, 10:1+ on --surf */
  --tx2:        #b89070;   /* secondary — amber-tan, ~6:1 on --surf */
  --tx3:        #8a6850;   /* tertiary — labels, ~3.6:1 on --surf (decorative) */
  --ph:         #503040;   /* placeholder */
  --muted:      #7a4a40;   /* very dim — disabled states */

  /* ── Accent — candle gold ── */
  --gold:       #ecbc34;   /* warm amber, punchy but not garish */
  --gold-gl:    rgba(236,188,52,.38);
  --gold-fi:    rgba(236,188,52,.14);
  --gold-fi2:   rgba(236,188,52,.07);

  /* ── Cards — always parchment face ── */
  --card-bg:    #f0deb4;
  --card-brd:   #b8903a;
  --card-tx:    #2a1208;
  --card-radius: 8px;
  --card-bleed: 5%;   /* bleed trim on card back images — increase if backs show white edge */

  /* ── States ── */
  --ok:         #50a070;
  --ok-tx:      #a0d4b0;
  --err:        #a03030;

  /* ── Hand carousel ── */
  --strip-h:    44%;       /* carousel hand strip height (full-open height) */
  --float-h:    190px;     /* float zone height above strip */
  --hand-h:     80px;      /* clearance for docked peek (HAND_PEEK_PX): only 80px shows when docked */

  /* ── Surface context — defaults for neutral views; .dark views override ── */
  --surf-bg:    var(--surf);
  --surf-title: var(--tx);
  --surf-act:   var(--surf2);
  --surf-card:  var(--card-bg);
  --surf-cbrd:  var(--card-brd);
  --surf-cname: var(--card-tx);

  /* ── Typography ─────────────────────────────────────────────────────────── */
  /* Font families — swap here to function-test across the whole UI */
  --font-display: 'mav', monospace;      /* mavsmooth — card names, display headers */
  --font-pixel:   mavpixel, 'Pangolin', monospace;   /* mavpixel — screen title headers (.ht) */
  --font-ui:      'Pangolin', cursive;   /* pangolin — body, buttons, inputs */

  /* Font size scale — change a step to shift all text at that level */
  --fs-2xs:  10px;   /* micro labels — tsl, qdot hints, overlay captions */
  --fs-xs:   11px;   /* tiny labels, badges, overlays */
  --fs-sm:   13px;   /* hints, secondary text, tags */
  --fs-md:   15px;   /* body, buttons */
  --fs-lg:   18px;   /* sub-headers, player names */
  --fs-xl:   26px;   /* section headers, game-name */
  --fs-2xl:  32px;   /* large display, result names */
  --fs-3xl:  48px;   /* hero text, ended champion */

  /* ── Spacing scale ───────────────────────────────────────────────────────── */
  --sp-2xs:  4px;
  --sp-xs:   6px;
  --sp-sm:   10px;
  --sp-md:   16px;
  --sp-lg:   24px;
  --sp-xl:   36px;

  /* ── Motion ──────────────────────────────────────────────────────────────── */
  --motion-snap:  .12s;    /* fast: card tap, button press */
  --motion-soft:  .15s;    /* medium: hover, border colour transitions */
  --motion-ease:  .38s;    /* slow: screen entry, card flip */
  --motion-pulse: 1.6s;    /* gold glow looping animations (pring, pulse) */
  --motion-cycle: 2500;    /* reveal cycle interval ms — read by host.html JS */

  /* ── Host card sizes — dial these to resize the TV display ─────────────── */
  --host-trouble-w:    280px;   /* centre trouble card */
  --host-hpc-w:        140px;   /* reveal row cards (face-down / waiting) */
  --host-hpc-live-w:   160px;   /* reveal row card for currently presenting player */
  --host-wins-w:        80px;   /* results winner cards (standard layout) */
  --host-wins-focus-w: 150px;   /* results winner cards (results-focus layout) */
  --host-sidebar-w:    280px;   /* scoreboard sidebar */

  /* ── Player card sizes ───────────────────────────────────────────────────── */
  --player-card-min: 100px;    /* minimum column width in hand card grid */
}

/* ── Host portrait — responsive token overrides ──────────────────────────────
   host.css layout rules (flex-direction, sidebar stacking) stay in host.css.
   Only size tokens live here so a single source controls responsive card scale. */
@media (orientation: portrait) {
  :root {
    --host-trouble-w:    clamp(140px, 40vw, 240px);
    --host-hpc-w:        90px;
    --host-hpc-live-w:   110px;
  }
}

/* ── Light Theme: Cathedral Stained Glass ── */
html[data-theme="light"] {
  --bg:         #f5ead0;   /* warm vellum */
  --surf:       #ede0c0;   /* cream panel */
  --surf2:      #e5d5aa;   /* secondary panel */
  --surf3:      #ddd0a0;   /* hover */
  --dark-elem:  #d8cfa0;   /* .dark modifier — tan parchment */

  --brd:        #c4a040;   /* gold lead line */
  --brd2:       #907020;

  --tx:         #1e0e06;   /* near-black */
  --tx2:        #5a3818;
  --tx3:        #8a6028;
  --ph:         #b09060;

  --gold:       #b88018;   /* readable gold on light (kept darker for contrast on pale bg) */
  --gold-gl:    rgba(184,128,24,.4);
  --gold-fi:    rgba(184,128,24,.15);
  --gold-fi2:   rgba(184,128,24,.07);

  --card-bg:    #fffdf0;
  --card-brd:   #c4a040;
  --card-tx:    #1e0e06;

  --ok:         #1a4020;
  --ok-tx:      #60a060;
  --err:        #8b2020;
}

/* Card shell, card-name, card-art, cn-bot — all live in card.css */