/* Game Gum Studio — design tokens v3 (founder's logo parts file)
 * Palette: Navy #0B2D6B · Pink #FF6B9D · Sunny Yellow #FFD633 · White.
 * Theme: light by default; navy dark mode via prefers-color-scheme or [data-theme="dark"].
 * Fonts (self-hosted in style.css):
 *   Poppins 800/900 (display) – chunky geometric headings next to the rounded gum wordmark.
 *   Nunito (body/UI)          – rounded terminals echo the gum shapes; full Vietnamese support.
 */

:root {
  /* brand colours (constant across themes) */
  --gg-navy: #0B2D6B;        /* trust, imagination */
  --gg-navy-deep: #081F4D;   /* dark-mode page */
  --gg-pink: #FF6B9D;        /* playful, creative — shapes, logo, buttons */
  --gg-pink-shade: #E8457F;
  --gg-pink-light: #FF9CC0;
  --gg-pink-ink: #C8245F;    /* pink text on white: 5.4:1 */
  --gg-yellow: #FFD633;      /* optimism, pioneer spirit — accents, bursts */
  --gg-white: #FFFFFF;
  --gg-tile: #F4F6FB;        /* light tile behind the GG app icon */

  /* semantic — light */
  --bg: var(--gg-white);
  --bg-soft: #F4F6FB;
  --surface: #FFFFFF;
  --surface-2: #FFF1F6;                 /* blush panel */
  --text: var(--gg-navy);               /* 13.1:1 on white */
  --text-muted: #4A5878;                /* 7.1:1 */
  --line: rgb(11 45 107 / .12);
  --brand: var(--gg-pink);
  --brand-text: var(--gg-pink-ink);
  --on-brand: var(--gg-navy);           /* navy on pink: 4.9:1 */
  --accent: var(--gg-yellow);
  --on-accent: var(--gg-navy);          /* 9.3:1 */
  --focus: var(--gg-pink-ink);

  /* type */
  --font-display: "Poppins", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-display: 800;
  --fw-wordmark: 900;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-hero: clamp(2.5rem, 1.5rem + 4.4vw, 4.75rem);
  --lh-tight: 1.05;
  --lh-body: 1.6;
  --tracking-display: -.03em;
  --tracking-label: .22em;              /* the boards' spaced uppercase labels */

  /* shape: everything is a soft piece of gum */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-icon: 23%;                   /* app-icon tile corner (board) */
  --radius-pill: 999px;

  /* spacing: 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --gutter: clamp(16px, 4vw, 40px);
  --content-max: 1160px;

  /* glossy vinyl depth (soft drop + top gloss lip), never neon glow */
  --shadow-1: 0 1px 0 rgb(11 45 107 / .06), 0 8px 20px -12px rgb(11 45 107 / .35);
  --shadow-2: 0 2px 0 rgb(11 45 107 / .06), 0 22px 40px -18px rgb(11 45 107 / .45);
  --shadow-pink: 0 14px 30px -14px rgb(232 69 127 / .55);
  --gloss: inset 0 3px 0 rgb(255 255 255 / .45), inset 0 -4px 0 rgb(11 45 107 / .10);

  /* motion: gum stretches past the mark and settles */
  --ease-stretch: cubic-bezier(.34, 1.56, .64, 1);
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --dur-quick: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--gg-navy-deep);
    --bg-soft: #0A2659;
    --surface: var(--gg-navy);
    --surface-2: #133A80;
    --text: #FFFFFF;                    /* 16:1 on --bg */
    --text-muted: #B9C6E4;              /* 9.3:1 */
    --line: rgb(255 255 255 / .14);
    --brand: var(--gg-pink);
    --brand-text: var(--gg-pink-light); /* 7.4:1 */
    --on-brand: var(--gg-navy);
    --focus: var(--gg-yellow);
    --shadow-1: 0 1px 0 rgb(0 0 0 / .25), 0 8px 20px -12px rgb(0 0 0 / .6);
    --shadow-2: 0 2px 0 rgb(0 0 0 / .25), 0 22px 40px -18px rgb(0 0 0 / .7);
    --gloss: inset 0 3px 0 rgb(255 255 255 / .22), inset 0 -4px 0 rgb(0 0 0 / .25);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: var(--gg-navy-deep);
  --bg-soft: #0A2659;
  --surface: var(--gg-navy);
  --surface-2: #133A80;
  --text: #FFFFFF;
  --text-muted: #B9C6E4;
  --line: rgb(255 255 255 / .14);
  --brand: var(--gg-pink);
  --brand-text: var(--gg-pink-light);
  --on-brand: var(--gg-navy);
  --focus: var(--gg-yellow);
  --shadow-1: 0 1px 0 rgb(0 0 0 / .25), 0 8px 20px -12px rgb(0 0 0 / .6);
  --shadow-2: 0 2px 0 rgb(0 0 0 / .25), 0 22px 40px -18px rgb(0 0 0 / .7);
  --gloss: inset 0 3px 0 rgb(255 255 255 / .22), inset 0 -4px 0 rgb(0 0 0 / .25);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-quick: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}