/* ==========================================================================
   Chasbi design tokens — cozy warmth, retro character (blueprint §3)
   --------------------------------------------------------------------------
   Palette sampled directly from the cozy reference: cream panels floating on a
   deep warm-brown canvas, with teal as the action colour and caramel/coral as
   support. The retro half of the brief lives in the *treatment* — uppercase
   tracked labels, chunky bordered buttons with a hard bottom edge, arcade game
   marks — not in a second palette.

   Fonts are system-only: the chasbi.uk CSP sets `font-src 'self'`, so a
   webfont would need a header change and a 100 KB download for decoration.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- core brand ---- */
  --teal:        #33bfc3;
  --teal-deep:   #1d9a9f;
  --teal-dark:   #14757a;
  --teal-contrast:#14757a;
  --caramel:     #c9854f;
  --caramel-deep:#a76736;
  --coral:       #e46648;
  --coral-deep:  #c44d31;
  --coral-contrast:#c44d31;
  --gold:        #e6ab3c;
  --gold-deep:   #bf8722;
  --gold-contrast:#9b6812;
  --green:       #4faa77;
  --green-deep:  #3a8c5e;
  --green-contrast:#347d54;
  --plum:        #9a6a92;

  --ink-deep:    #221812;   /* the darkest ink — mark outlines, pressed edges */
  --paper:       #f6efe4;

  /* ---- semantic ---- */
  --ok:     var(--green);
  --warn:   var(--gold);
  --danger: var(--coral);
  --info:   var(--teal);

  /* ---- typography ---- */
  --font-ui: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
             "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display",
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  --size-xs:   0.6875rem;
  --size-sm:   0.8125rem;
  --size-base: 0.9375rem;
  --size-md:   1.0625rem;
  --size-lg:   1.3125rem;
  --size-xl:   1.625rem;
  --size-2xl:  2.125rem;

  --weight-normal: 500;
  --weight-medium: 600;
  --weight-bold:   700;
  --weight-black:  800;

  --tracking-label: 0.085em;   /* retro uppercase labels */
  --tracking-tight: -0.015em;

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

  /* ---- radii — generous and soft, per the cozy reference ---- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-2xl:  34px;
  --r-pill: 999px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.2, .8, .3, 1);
  --ease-back: cubic-bezier(.34, 1.4, .5, 1);
  --dur-fast: 130ms;
  --dur:      220ms;
  --dur-slow: 360ms;

  /* ---- layout ---- */
  --shell-max: 520px;
  --nav-h: 66px;
  --topbar-h: 58px;
  --tap-min: 44px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  --z-nav: 40;
  --z-topbar: 30;
  --z-dock: 45;
  --z-sheet: 60;
  --z-toast: 80;

  /* Updated by the visualViewport bridge when a native keyboard opens. */
  --visual-height: 100dvh;
  --visual-top: 0px;
  --keyboard-inset: 0px;
}

/* ---------------------------------------------------------------------------
   DEFAULT (and light): warm ivory, with enough contrast to stay crisp outdoors.
   --------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;
  --canvas:      #eee2cf;
  --canvas-2:    #e6d5bc;
  --grain:       rgba(90, 62, 34, .045);

  --surface:     #fffaf1;
  --surface-2:   #f5ead9;
  --surface-3:   #e8d7be;
  --surface-alt: #2a1f17;

  --text:    #2b1e15;
  --text-2:  #6f5946;
  --text-3:  #6f5946;
  --on-dark: #fffaf1;
  --on-accent: #14100c;

  /* text and marks that sit directly on the canvas, not on a cream panel */
  --on-canvas:     #39291c;
  --on-canvas-dim: rgba(57, 41, 28, .76);
  --press-canvas:  rgba(43, 30, 21, .075);
  --tile-bg:       rgba(58, 42, 28, .05);
  --tile-line:     rgba(58, 42, 28, .18);
  --tile-dead-bg:  rgba(58, 42, 28, .10);
  --tile-dead-fg:  rgba(58, 42, 28, .40);

  --line:    rgba(43, 30, 21, .12);
  --line-2:  rgba(43, 30, 21, .22);
  --line-dark: rgba(43, 30, 21, .14);
  --panel-outline: transparent;

  --shadow-sm: 0 2px 5px rgba(87, 55, 24, .09), 0 1px 1px rgba(87, 55, 24, .08);
  --shadow:    0 14px 34px rgba(87, 55, 24, .13), 0 2px 7px rgba(87, 55, 24, .08);
  --shadow-lg: 0 28px 70px rgba(64, 39, 17, .20), 0 5px 16px rgba(64, 39, 17, .10);

  --press:   rgba(43, 30, 21, .08);
  /* Opaque on purpose. This is used as a *background* on lobby cards,
     notifications and leaderboard rows, and those can sit directly on the dark
     canvas — a translucent wash let the canvas through and put dark text on a
     dark background. Mixing into --surface keeps it readable everywhere. */
  --wash:    color-mix(in srgb, var(--teal) 16%, var(--surface));
}

/* ---------------------------------------------------------------------------
   DARK: an explicit choice, or the device palette when “System” is selected.
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --canvas:#080a0a; --canvas-2:#0d1010; --grain:rgba(255,255,255,.018);
  --surface:#131616; --surface-2:#1b1f1f; --surface-3:#292e2e; --surface-alt:#050606;
  --text:#f2f4f3; --text-2:#bcc2bf; --text-3:#929a96; --on-dark:#f2f4f3; --on-accent:#071112;
  --on-canvas:#f2f4f3; --on-canvas-dim:#aeb5b2; --teal-contrast:#62d7da;
  --coral-contrast:#ff8e75; --gold-contrast:#f0c160; --green-contrast:#77d5a2;
  --press:rgba(255,255,255,.075); --press-canvas:rgba(255,255,255,.075);
  --tile-bg:#111414; --tile-line:rgba(255,255,255,.11); --tile-dead-bg:#1b1f1f; --tile-dead-fg:#7f8783;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.16); --line-dark:rgba(255,255,255,.1); --panel-outline:rgba(255,255,255,.075);
  --shadow-sm:0 2px 5px rgba(0,0,0,.28); --shadow:0 12px 30px rgba(0,0,0,.38); --shadow-lg:0 28px 66px rgba(0,0,0,.58);
  --wash:color-mix(in srgb,var(--teal) 10%,var(--surface-2));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --canvas:#080a0a; --canvas-2:#0d1010; --grain:rgba(255,255,255,.018);
    --surface:#131616; --surface-2:#1b1f1f; --surface-3:#292e2e; --surface-alt:#050606;
    --text:#f2f4f3; --text-2:#bcc2bf; --text-3:#929a96; --on-dark:#f2f4f3; --on-accent:#071112;
    --on-canvas:#f2f4f3; --on-canvas-dim:#aeb5b2; --teal-contrast:#62d7da;
    --coral-contrast:#ff8e75; --gold-contrast:#f0c160; --green-contrast:#77d5a2;
    --press:rgba(255,255,255,.075); --press-canvas:rgba(255,255,255,.075);
    --tile-bg:#111414; --tile-line:rgba(255,255,255,.11); --tile-dead-bg:#1b1f1f; --tile-dead-fg:#7f8783;
    --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.16); --line-dark:rgba(255,255,255,.1); --panel-outline:rgba(255,255,255,.075);
    --shadow-sm:0 2px 5px rgba(0,0,0,.28); --shadow:0 12px 30px rgba(0,0,0,.38); --shadow-lg:0 28px 66px rgba(0,0,0,.58);
    --wash:color-mix(in srgb,var(--teal) 10%,var(--surface-2));
  }
}

/* ---- per-game accent (§3.3: games colour their canvas, not the chrome) ---- */
[data-game="thirteen-cards"] { --game-accent: var(--coral);  --game-accent-deep: var(--coral-deep); }
[data-game="drawies"]        { --game-accent: var(--gold);   --game-accent-deep: var(--gold-deep); }
[data-game="wordies"]        { --game-accent: var(--teal);   --game-accent-deep: var(--teal-deep); }
:root                        { --game-accent: var(--teal);   --game-accent-deep: var(--teal-deep); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}