/* ============================================================
   CARDZY — REDESIGN "STUDS & SORBET"
   Design tokens · light theme (+ dark scaffold)
   Vanilla canvas · ink outline · sorbet pastels · block shadows
   ============================================================ */

/* ---- Fonts (loaded in HTML via Google Fonts) ----
   Display/headings:  'Fredoka'            (rounded grotesk)
   Body/UI:           'Plus Jakarta Sans'  (clean sans)
   Mono/codes:        'Space Mono'
*/

:root {
  /* ---------- BRAND / CORE PALETTE ---------- */
  --vanilla:        #FFF6EE;   /* page canvas */
  --vanilla-deep:   #FCEEDF;   /* alt section bg */
  --cream:          #FFEFD6;   /* tinted surface */
  --paper:          #FFFFFF;   /* card surface */
  --ink:            #241B16;   /* outline + primary text */
  --ink-soft:       #5B4F47;   /* secondary text */
  --ink-faint:      #948A82;   /* muted text / placeholder */
  --line-soft:      #EDE2D4;   /* hairline on vanilla */

  /* ---------- SORBET ACCENTS ---------- */
  --coral:          #FF7A59;   /* PRIMARY cta */
  --coral-deep:     #E0633E;   /* coral shadow / hover */
  --coral-tint:     #FFE2D8;
  --grass:          #5DBB8E;   /* SECONDARY / success */
  --grass-deep:     #429B71;
  --grass-tint:     #DCF0E6;
  --blueberry:      #6C7CF0;   /* info / links / games */
  --blueberry-deep: #4F5FD4;
  --blueberry-tint: #E1E5FD;
  --lemon:          #FFC94D;   /* highlight / rewards */
  --lemon-deep:     #E8A92B;
  --lemon-tint:     #FFF0CC;
  --grape:          #A66BD4;   /* premium / special */
  --grape-deep:     #8A4FBC;
  --grape-tint:     #EFE2FA;
  --bubble:         #FF9DC0;   /* pink accent */
  --bubble-tint:    #FFE2EC;

  /* ---------- SEMANTIC ---------- */
  --success:        #2E9E6B;
  --success-bg:     #DCF0E6;
  --warning:        #E8A92B;
  --warning-bg:     #FFF0CC;
  --danger:         #E5484D;
  --danger-deep:    #C73B40;
  --danger-bg:      #FCE0E1;
  --info:           #4F5FD4;
  --info-bg:        #E1E5FD;

  /* ---------- RARITY (kept consistent across themes) ---------- */
  --r-common:       #4CAF82;
  --r-common-bg:    #DCF0E6;
  --r-uncommon:     #3B82F6;
  --r-uncommon-bg:  #DCE8FE;
  --r-rare:         #8B5CF6;
  --r-rare-bg:      #ECE3FE;
  --r-epic:         #6D28D9;
  --r-epic-bg:      #E7DBFB;
  --r-legendary:    #F59E0B;
  --r-legendary-bg: #FFF0CC;
  --r-mythic:       #EC4899;
  --r-mythic-bg:    #FCE1EF;
  --r-divine:       #E11D48;
  --r-divine-bg:    #FCE0E5;

  /* ---------- GAME TAGS ---------- */
  --g-adoptme:      #A66BD4;  --g-adoptme-bg:  #EFE2FA;
  --g-grow:         #5DBB8E;  --g-grow-bg:     #DCF0E6;
  --g-mm2:          #E5484D;  --g-mm2-bg:      #FCE0E1;
  --g-blade:        #6C7CF0;  --g-blade-bg:    #E1E5FD;
  --g-blox:         #E8A92B;  --g-blox-bg:     #FFF0CC;
  --g-petsim:       #FF9DC0;  --g-petsim-bg:   #FFE2EC;

  /* ---------- TYPE SCALE ---------- */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  --fs-hero:    56px;   --lh-hero: 1.02;
  --fs-h1:      40px;   --lh-h1:   1.06;
  --fs-h2:      30px;   --lh-h2:   1.12;
  --fs-h3:      22px;   --lh-h3:   1.2;
  --fs-h4:      18px;   --lh-h4:   1.3;
  --fs-lg:      17px;
  --fs-base:    15px;   --lh-base: 1.55;
  --fs-sm:      13.5px;
  --fs-xs:      12px;
  --fs-label:   11px;   /* uppercase labels */
  --fs-price:   18px;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ---------- SPACING (4-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; --sp-16: 64px; --sp-20: 80px;

  /* ---------- RADIUS (pillowy) ---------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---------- BORDERS (signature ink outline) ---------- */
  --bw:        2px;          /* default outline weight */
  --bw-thick:  2.5px;
  --border:    var(--bw) solid var(--ink);
  --border-soft: 1.5px solid var(--line-soft);

  /* ---------- SHADOWS ---------- */
  /* block = hard offset, no blur (the "brick" signature) */
  --sh-block-xs: 2px 2px 0 var(--ink);
  --sh-block:    4px 4px 0 var(--ink);
  --sh-block-lg: 6px 6px 0 var(--ink);
  /* soft = gentle ambient for floating surfaces */
  --sh-soft:     0 6px 18px rgba(36,27,22,.10);
  --sh-soft-lg:  0 14px 34px rgba(36,27,22,.14);
  --sh-pop:      0 2px 0 rgba(36,27,22,.06);

  /* ---------- LAYOUT ---------- */
  --max-w:        1240px;
  --sidebar-w:    264px;
  --nav-h:        68px;
  --pad-x:        24px;

  /* ---------- MOTION ---------- */
  --t-fast:   140ms cubic-bezier(.4,0,.2,1);
  --t-norm:   200ms cubic-bezier(.4,0,.2,1);
  --t-spring: 320ms cubic-bezier(.34,1.56,.64,1);

  /* ---------- THEME-AWARE SURFACES ---------- */
  --invert-surface: #241B16;  /* always-dark surfaces (balance card, marquee, footer) */
  --on-invert:      #F4EAD9;  /* light text on invert surfaces (both themes) */
  --status-live-bg: #FFE2D8;  /* live pill bg (stays light in both themes) */

  color-scheme: light;
}

/* ============================================================
   DARK THEME  ("Studs & Sorbet · Night")
   Flip --ink to warm cream → text/outline/shadow become luminous
   cream on dark surfaces. Accents stay vivid. Tints darken.
   ============================================================ */
[data-theme="dark"] {
  --vanilla:        #17120E;
  --vanilla-deep:   #1F1813;
  --cream:          #241C15;
  --paper:          #2B2219;
  --ink:            #F0E6D6;   /* now: foreground / outline / text / shadow */
  --ink-soft:       #BCAF9E;
  --ink-faint:      #8B7E6E;
  --line-soft:      #3A2E23;

  --invert-surface: #0E0B07;

  /* tints → muted dark colored surfaces so cream text/icons read */
  --coral-tint:     rgba(255,122,89,.16);
  --grass-tint:     rgba(93,187,142,.16);
  --blueberry-tint: rgba(108,124,240,.16);
  --lemon-tint:     rgba(255,201,77,.15);
  --grape-tint:     rgba(166,107,212,.18);
  --bubble-tint:    rgba(255,157,192,.16);

  color-scheme: dark;
}

/* placeholder to keep selector list intact */
:root.__noop { color-scheme: light; }


/* Breakpoints (reference):  desktop >=960 · tablet <=900 · mobile <=560 */