/* Barricade design tokens — Slate restyle.
   Cool slate base, amber primary, coral (you) vs sky blue (bot), chunky 3D buttons.
   Screens and components must read these variables; no raw colors/sizes elsewhere. */
:root {
  /* ---- surfaces ---- */
  --bc-bg: #0e0f12;          /* app background */
  --bc-glow: #1d2026;        /* soft light at the top of the screen */
  --bc-card: #1b1e24;        /* flat cards, sheets */
  --bc-card-hi: #1b1e24;     /* hero card on Home */
  --bc-well: #13151a;        /* recessed switch track */
  --bc-tile: #232730;        /* button/tile face, inset cards (card-raised) */
  --bc-tile-hi: #2b303b;     /* selected / pressed tile */
  --bc-dock: #14161a;        /* bottom dock */
  --bc-tabbar: #101216;      /* tab bar */
  --bc-edge: #0b0c0f;        /* hard bottom edge of neutral buttons, hairlines */
  --bc-hair: rgba(255, 255, 255, .06); /* 1px inner outline of cards */
  --bc-pip-off: rgba(255, 255, 255, .1); /* spent wall pips */
  --bc-danger: #ff8d7e;      /* loss / danger text */
  --bc-sel: #232730;         /* selected / active tile (neutral raised) */
  --bc-sel-line: rgba(255, 255, 255, .14); /* its 1px inner highlight */
  --bc-mint: #6fd08c;        /* success: beaten, win, progress, switch on */
  --bc-mint-ink: #102014;
  --bc-mint-soft: rgba(111, 208, 140, .16);

  /* ---- text ---- */
  --bc-text: #eef0f4;
  --bc-text-2: #c3c9d4;
  --bc-muted: #8a93a3;
  --bc-wordmark-edge: #3a4452;

  /* ---- primary action: amber ---- */
  --bc-amber: #ffb020;
  --bc-amber-hi: #ffc84a;     /* top of the button gradient */
  --bc-amber-glow: rgba(255, 176, 32, .8);
  --bc-amber-soft: rgba(255, 176, 32, .22);  /* glow around your active strip */
  --bc-amber-wash: rgba(255, 176, 32, .14);  /* warm corner light on the Play card */
  --bc-amber-tint: #241f19;                  /* background of the next-opponent card */
  --bc-amber-pill: rgba(43, 28, 0, .18);     /* count pill on an amber face */
  --bc-amber-edge: #b97500;
  --bc-amber-ink: #2b1c00;   /* text/icons on amber */

  /* ---- players: two-tone (light half / dark half) ---- */
  --bc-coral-l: #ff9484;  --bc-coral-d: #ff6a55;  --bc-coral-edge: #bf3626;   /* you */
  --bc-blue-l: #8dd2ff;   --bc-blue-d: #4cb8ff;   --bc-blue-edge: #1766b8;    /* bot */
  --bc-coral-wash: #3a2427;  --bc-blue-wash: #1b2f44;                         /* avatar tile backgrounds */

  /* ---- walls (two-tone, neutral) ---- */
  --bc-wall-l: #f9f2e3;   --bc-wall-d: #d4c3a0;   --bc-wall-top: #ffffff;     /* ivory walls (default wall style) */

  /* ---- hero floor (perspective board) ---- */
  --bc-floor-a: #2e3947;  --bc-floor-b: #273140;  --bc-floor-edge: #1c232c;  --bc-floor-shadow: #0b0e12;

  /* ---- in-game board (swappable theme) ---- */
  --bc-board-l: #2e3947;  --bc-board-d: #273140;  --bc-board-edge: #0b0e12;  /* Slate; other boards live in src/themes.js */
  --bc-last-move: #ffb020;

  /* ---- type ---- */
  --bc-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bc-w-medium: 600; --bc-w-bold: 700; --bc-w-heavy: 800;
  --bc-ts: 1;            /* text scale: 1, 1.15 (large), 1.3 (larger); set by Accessibility */
  --bc-fs-wordmark: calc(40px * var(--bc-ts)); --bc-fs-title: calc(22px * var(--bc-ts)); --bc-fs-section: calc(19px * var(--bc-ts)); --bc-fs-body: calc(16px * var(--bc-ts));
  --bc-fs-small: calc(14px * var(--bc-ts));   --bc-fs-micro: calc(13px * var(--bc-ts)); --bc-fs-button: calc(18px * var(--bc-ts)); --bc-fs-play: calc(22px * var(--bc-ts));

  /* ---- radii ---- */
  --bc-r-sm: 12px;       /* avatars, counters */
  --bc-r-btn: 16px;      /* buttons, tiles */
  --bc-r-small-btn: 14px;
  --bc-r-card: 16px;     /* flat cards */
  --bc-r-sheet: 24px;    /* bottom sheets (top corners) */

  /* ---- border depths (hard 3D edges, no blur) ---- */
  --bc-depth: 5px;       /* chunky buttons */
  --bc-depth-sm: 3px;    /* small buttons, avatars */
  --bc-press: 3px;       /* how far a pressed button moves down */

  /* ---- spacing & sizing ---- */
  --bc-s1: 4px; --bc-s2: 8px; --bc-s3: 12px; --bc-s4: 16px; --bc-s5: 24px; --bc-s6: 32px;
  --bc-hit: 48px;            /* minimum touch target */
  --bc-btn-h: 56px;          /* big button height */
  --bc-btn-h-sm: 44px;
  --bc-tabbar-h: 84px;       /* includes home-indicator area */
  --bc-topbar-h: 56px;
  --bc-gutter: 16px;
  --bc-max-w: 520px;         /* app column on wide screens */

  /* ---- overlays & states ---- */
  --bc-scrim: rgba(5, 7, 10, .7);
  --bc-dim: .42;             /* opacity of not-yet-earned / disabled art */
  --bc-wall-hi: rgba(255, 255, 255, .3);
  --bc-z-sheet: 10;
  --bc-z-game: 20;
  --bc-z-dialog: 30;
  --bc-motion: .18s;

  /* ---- intro mini boards (the real board draws from src/themes.js) ---- */
  --light: var(--bc-board-l);
  --dark: var(--bc-board-d);
}

/* Accessibility settings (src/settings.js sets these data attributes on <html>) */
html[data-text="large"] { --bc-ts: 1.15; }
html[data-text="xl"] { --bc-ts: 1.3; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion="off"] .conf { display: none; }