/* ─────────────────────────────────────────────────────────────
   Gigil.ai — Colors & Typography Tokens
   Source of truth: ref/DESIGN.md "Gigil Living System" — candy
   palette + Soft Maximalism. Light theme. Unified Fredoka.
   ───────────────────────────────────────────────────────────── */

/* Fonts — Fredoka unified across head + body; JetBrains Mono for stats. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── SURFACES (light marshmallow base) ──────────────── */
  --bg:                 #f9f9ff;   /* surface / background */
  --surface-1:          #ffffff;   /* marshmallow-white, lowest */
  --surface-2:          #FFF0F3;   /* bubblegum-bg, default card tint */
  --surface-3:          #f3f3fa;   /* surface-container-low */
  --surface-4:          #ededf4;   /* surface-container */
  --surface-5:          #e7e8ee;   /* surface-container-high */
  --border:             rgba(25,28,32,0.08);
  --border-bright:      rgba(25,28,32,0.14);

  /* ── CANDY PALETTE (from DESIGN.md, purple-free) ────── */
  --candy-pink:         #FF6B6B;   /* PRIMARY — the brand color */
  --candy-pink-deep:    #ae2f34;   /* primary variant (M3 primary) */
  --candy-pink-on:      #6d0010;   /* on-primary-container */
  --candy-pink-soft:    #FFB8AA;   /* soft pink, tints + warmer UI */
  --soft-teal:          #4ECDC4;   /* secondary */
  --soft-teal-deep:     #006a65;   /* secondary variant */
  --soft-teal-fixed:    #79f3ea;
  --lemon-yellow:       #FFE66D;   /* tertiary / reward */
  --lemon-yellow-deep:  #c1ab38;
  --peach:              #FFD4C1;   /* replaces lavender for UI depth — no purple */
  --marshmallow:        #FFFFFF;
  --bubblegum:          #FFF0F3;

  /* ── TEXT (dark charcoal, never pure black) ─────────── */
  --text-1:             #191c20;   /* on-surface, primary body */
  --text-2:             #584140;   /* on-surface-variant, muted */
  --text-3:             #8c706f;   /* outline, hint */
  --text-4:             #e0bfbd;   /* outline-variant, disabled */
  --text-on-pink:       #ffffff;   /* on candy-pink fills */
  --text-on-teal:       #ffffff;   /* on soft-teal fills */
  --text-on-yellow:     #211b00;   /* on lemon-yellow fills */

  /* ── SEMANTIC ───────────────────────────────────────── */
  --fg-1: var(--text-1);
  --fg-2: var(--text-2);
  --fg-3: var(--text-3);
  --primary: var(--candy-pink);
  --primary-on: var(--text-on-pink);
  --accent: var(--candy-pink);
  --secondary: var(--soft-teal);
  --tertiary: var(--lemon-yellow);
  --success: var(--soft-teal);
  --danger: var(--candy-pink-deep);
  --warning: var(--lemon-yellow-deep);
  --info: var(--soft-teal);
  --on-primary: var(--text-on-pink);
  --on-secondary: var(--text-on-teal);

  /* ── SIGNATURE GRADIENTS (high-energy candy) ───────── */
  --grad-brand:    linear-gradient(135deg, var(--candy-pink), #FF8FAB);
  --grad-primary:  linear-gradient(135deg, var(--candy-pink), var(--candy-pink-deep));
  --grad-hp:       linear-gradient(90deg,  var(--soft-teal), var(--candy-pink));     /* care = teal → pink */
  --grad-xp:       linear-gradient(90deg,  var(--soft-teal-fixed), var(--candy-pink));
  --grad-credit:   linear-gradient(135deg, var(--lemon-yellow), #FFC93C);
  --grad-evolve:   linear-gradient(135deg, var(--soft-teal), var(--candy-pink));     /* the evolution gradient */
  --grad-care:     linear-gradient(135deg, var(--peach), var(--soft-teal));
  --grad-share:    linear-gradient(135deg, var(--candy-pink), var(--lemon-yellow));
  --grad-night-hero: linear-gradient(160deg, var(--bubblegum) 0%, #FFE0E6 50%, #FFD4DD 100%);

  /* ── FONT FAMILIES (unified Fredoka) ────────────────── */
  --font-head:   'Fredoka', sans-serif;          /* display + cute */
  --font-body:   'Fredoka', sans-serif;          /* body — same family for unity */
  --font-mono:   'JetBrains Mono', monospace;    /* stats, units, eyebrows only */

  /* ── TYPE SCALE ─────────────────────────────────────── */
  --fs-display:   48px;
  --fs-title:     32px;
  --fs-h1:        24px;
  --fs-h2:        20px;
  --fs-h3:        16px;
  --fs-body:      14px;
  --fs-small:     12px;
  --fs-micro:     10px;
  --fs-nano:      9px;

  /* ── RADII (ultra-rounded, pill-forward per DESIGN.md) */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   16px;     /* "minimum radius of 1rem" — DESIGN.md */
  --r-lg:   24px;     /* cards: 2rem corner radii */
  --r-xl:   32px;
  --r-2xl:  40px;     /* phone bezel */
  --r-pill: 9999px;

  /* ── SPACING (8pt rhythm) ───────────────────────────── */
  --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;

  /* ── ELEVATION (extremely diffused, candy-tinted) ──── */
  --shadow-sm:   0 4px 16px rgba(255,107,107,0.10);
  --shadow-md:   0 12px 32px rgba(255,107,107,0.14);
  --shadow-lg:   0 24px 64px rgba(174,47,52,0.18), 0 0 0 1px rgba(25,28,32,0.04);
  --glow-pink:   0 0 32px rgba(255,107,107,0.30);
  --glow-teal:   0 0 24px rgba(78,205,196,0.30);
  --glow-yellow: 0 0 24px rgba(255,230,109,0.40);
  --glow-peach: 0 0 24px rgba(255,212,193,0.45);

  /* Glassmorphism overlays */
  --glass-fill:    rgba(255,255,255,0.55);
  --glass-border:  1px solid rgba(255,255,255,0.65);
  --glass-blur:    blur(20px);

  /* ── MOTION ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:    150ms;
  --t-base:    250ms;
  --t-slow:    400ms;
}

/* ─────────────────────────────────────────────────────────────
   DARK THEME — opt-in via [data-theme="dark"] on <html> or <body>
   The candy palette is preserved; surfaces flip to a deep navy
   bed and text colors invert. Components using --bg / --surface-*
   / --text-* / --border tokens flip automatically.
   ───────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:                 #0B0B18;
  --surface-1:          #14142A;
  --surface-2:          #1C1C36;
  --surface-3:          #242442;
  --surface-4:          #2D2D52;
  --surface-5:          #383865;
  --border:             rgba(255,255,255,0.08);
  --border-bright:      rgba(255,255,255,0.18);

  --text-1:             #f4f4ff;
  --text-2:             #c0bdd9;
  --text-3:             #8a85ad;
  --text-4:             #4a456c;

  /* Tint the bubblegum + peach for parity */
  --bubblegum:          #2A1F2F;
  --candy-pink-soft:    #FF8FAB;

  /* Glass overlays — darker ground */
  --glass-fill:    rgba(20,20,42,0.55);
  --glass-border:  1px solid rgba(255,255,255,0.12);

  /* Night hero is unchanged — already dark */
  --grad-night-hero: linear-gradient(160deg, #1a0a2e 0%, #2d1b4e 50%, #0d1a2e 100%);
}

/* ─────────────────────────────────────────────────────────────
   SEMANTIC ELEMENT STYLES
   ───────────────────────────────────────────────────────────── */
.gigil-display {
  font-family: var(--font-head);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--candy-pink);
}

.gigil-title {
  font-family: var(--font-head);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-1);
}

h1, .h1 { font-family: var(--font-head); font-size: var(--fs-h1); font-weight: 700; line-height: 1.2; color: var(--text-1); }
h2, .h2 { font-family: var(--font-head); font-size: var(--fs-h2); font-weight: 600; line-height: 1.25; color: var(--text-1); }
h3, .h3 { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--text-1); }

p, .body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: 1.6; color: var(--text-2); }

.label  { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }
.micro  { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 500; color: var(--text-3); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--candy-pink);
}

.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-2);
}

.stat-num {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
}