/* ==========================================================================
   Jibberpop Design Tokens
   Source of truth: scripts/global.gd palette() (light + dark)
   ========================================================================== */

@font-face {
  font-family: "Fredoka One";
  src: url("assets/fonts/FredokaOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Titan One";
  src: url("assets/fonts/TitanOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Luckiest Guy";
  src: url("assets/fonts/LuckiestGuy-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Exo 2";
  src: url("assets/fonts/Exo2-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("assets/fonts/Quicksand-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("assets/fonts/Quicksand-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("assets/fonts/Quicksand-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("assets/fonts/Quicksand-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ── Type families ───────────────────────────────────────────────── */
  /* Display / headers = Luckiest Guy. Body = Exo 2. */
  --font-display: "Luckiest Guy", "Fredoka One", system-ui, sans-serif;
  --font-display-alt: "Fredoka One", "Titan One", system-ui, sans-serif;
  --font-impact: "Luckiest Guy", "Titan One", system-ui, sans-serif;
  --font-tech: "Exo 2", "Quicksand", system-ui, sans-serif;
  --font-body: "Exo 2", "Quicksand", system-ui, sans-serif;

  /* ── Light palette (storybook / actual game) ─────────────────────── */
  --c-bg:                #efe4d4;   /* warm parchment background */
  --c-tile:              #dccfb6;   /* sand tile face */
  --c-tile-border:       #2a221a;   /* near-black ink outline */
  --c-tile-highlight:    #f1e6cf;
  --c-letter-text:       #2a221a;   /* tile letters use ink color */
  --c-letter-shadow:     rgba(0,0,0,0.15);
  --c-grid-bg:           #ece1cc;   /* paper inside the board frame */
  --c-grid-lines:        rgba(42,34,26,0.18);
  --c-label-text:        #2a221a;
  --c-label-subheader:   #d65a5a;   /* warm storybook coral — used for "SCORE", "TURNS LEFT" */
  --c-label-header:      #ffffff;
  --c-grid-panel:        #f5ecd9;   /* torn-paper tile sheet */
  --c-stats-panel:       #f5ecd9;   /* cream pill background */
  --c-history-panel:     #f5ecd9;
  --c-next-panel:        #f5ecd9;
  --c-overlay-bg:        #f5ecd9;
  --c-btn-bg:            #9b96cc;   /* lavender — primary in-game CTA */
  --c-btn-bg-secondary:  #e07474;   /* coral — destructive / cancel */
  --c-btn-font:          #ffffff;
  --c-progress-bg:       #b8ad9e;
  --c-progress-fill:     #d65a5a;   /* threat bar in actual game is red */
  --c-progress-pink:     #e9a6c0;
  --c-high-score-active: #59c062;   /* softer green */
  --c-word-pop-panel:    #f2ebda;
  --c-word-pop-text:     #ffffff;
  --c-word-pop-outline:  #000000;

  /* highlight tints (cluster sizes) — soft storybook tints */
  --c-h-single: #8bc97a;  /* 1 word — green */
  --c-h-pair:   #e89c4a;  /* 2 stacked — orange */
  --c-h-triple: #d65a5a;  /* 3 stacked — coral */
  --c-h-quad:   #b387d6;  /* 4+ stacked — soft purple */
  --c-h-chain:  #f0c14a;  /* chain — gold */

  --c-wall-tile:         #8e8e8e;
  --c-block-fill:         #44090a;  /* 0.267 0.003 0.003 */
  --c-block-pulse:        #cc3333;
  --c-swap-pulse:         #26a6d9;
  --c-powerup-icon:       #d36060;
  --c-price-affordable:   #ffffff;
  --c-price-locked:       #cc0003;

  /* ── Surfaces / strokes (storybook ink + paper) ───────────────────── */
  --c-ink:               #2a221a;        /* near-black body copy */
  --c-ink-soft:          rgba(42,34,26,0.7);
  --c-ink-muted:         rgba(42,34,26,0.45);
  --c-paper:             #f5ecd9;        /* torn paper / panel surface */
  --c-paper-deep:        #e6d7bc;
  --c-line:              rgba(42,34,26,0.22);
  --c-line-strong:       #2a221a;

  /* Painted scene backgrounds (used as full-bleed on phone screens) */
  --c-scene-forest:      #93b39c;        /* moody green/teal forest */
  --c-scene-desert:      #d8c0a3;        /* warm desert/canyon */

  /* ── Radii (Godot scenes use 14–28px on panels, 10–14px on tiles) ─ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ── Spacing scale (4-step) ───────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 80px;

  /* ── Shadows: subtle, hand-drawn ──────────────────────────────────── */
  /* Tiles in real game have NO offset 3D shadow — just a thin ink stroke */
  --sh-tile:    none;
  --sh-btn:     0 2px 0 0 rgba(42,34,26,0.35);
  --sh-btn-coral: 0 2px 0 0 rgba(42,34,26,0.35);
  --sh-card:    0 4px 14px -4px rgba(42,34,26,0.18);
  --sh-pop:     0 14px 36px -12px rgba(42,34,26,0.35);
  --sh-pill:    0 2px 0 rgba(42,34,26,0.25);

  /* ── Motion ──────────────────────────────────────────────────────── */
  --ease-pop:   cubic-bezier(.34,1.56,.64,1);
  --ease-out:   cubic-bezier(.22,.61,.36,1);
}

/* ── Dark palette (mirrors palette()/dark_mode == true) ─────────────── */
[data-theme="dark"] {
  --c-bg:                #ffffff;       /* note: GD has bg=white in dark — kept faithful */
  --c-tile:              #423830;
  --c-tile-border:       #29211a;
  --c-tile-highlight:    #5c4f42;
  --c-letter-text:       #e0d1b8;
  --c-letter-shadow:     rgba(0,0,0,0.4);
  --c-grid-bg:           #292726;
  --c-grid-lines:        rgba(58,47,33,0.6);
  --c-label-text:        #ffffff;
  --c-label-subheader:   #d36060;
  --c-label-header:      #d36060;
  --c-grid-panel:        #332b23;
  --c-stats-panel:       #332b23;
  --c-history-panel:     #332b23;
  --c-next-panel:        #332b23;
  --c-overlay-bg:        #3d3d3d;
  --c-btn-bg:            #928fc4;
  --c-btn-bg-secondary:  #d36060;
  --c-progress-fill:     #9ec78c;       /* GD: 0.62 0.78 0.549 */
  --c-word-pop-text:     rgba(0,0,0,0.9);
  --c-word-pop-outline:  #ffffff;

  --c-ink:               #f4ede0;
  --c-ink-soft:          rgba(244,237,224,0.7);
  --c-ink-muted:         rgba(244,237,224,0.4);
  --c-paper:             #2b2520;
  --c-paper-deep:        #1f1a16;
  --c-line:              rgba(244,237,224,0.15);
  --c-line-strong:       #e0d1b8;
}