/* tokens.css: the design tokens of the game (D-032): colours, 8pt spacing, radii, shadows, glass material, type scale, motion.
   Talks to: every stylesheet (base, screens, family, evolution, island) reads these variables.
   Update: change a colour or size here once; never hard-code a new one in a component. */
:root {
  /* palette: night-violet ink, wand gold, spell violet, meadow green, lagoon blue, petal pink */
  --ink: #241C4A; --ink-2: #4A4372; --ink-3: #8A84A6;
  --paper: #FFF9EE; --paper-2: #F3ECFF;
  --gold: #FFC93C; --gold-hi: #FFE88A; --gold-dark: #C7780C;
  --violet: #6A4BF0; --violet-hi: #9C86FF; --violet-dark: #3F2AA8;
  --meadow: #2EB86A; --meadow-hi: #6EE59A; --meadow-dark: #1B7F45;
  --lagoon: #1E9BD6; --lagoon-hi: #7FE3FF; --lagoon-dark: #135E8C;
  --petal: #E0457B; --danger: #C2452D;
  --sheet: var(--paper); --purple: var(--violet); --purple-dark: var(--violet-dark);
  /* 8pt grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* radii: chips < buttons < cards < sheets */
  --r-chip: 12px; --r-btn: 16px; --r-card: 22px; --r-sheet: 28px; --r-pill: 999px;
  /* shadows: one soft key light from above */
  --sh-1: 0 1px 2px rgba(36,28,74,.12), 0 2px 8px rgba(36,28,74,.10);
  --sh-2: 0 2px 4px rgba(36,28,74,.12), 0 10px 24px rgba(36,28,74,.18);
  --sh-3: 0 8px 18px rgba(36,28,74,.22), 0 24px 48px rgba(36,28,74,.24);
  /* glass material (iOS-like): translucent fill + blur + hairline border */
  --glass: rgba(255,255,255,.62); --glass-dark: rgba(36,28,74,.42);
  --glass-line: rgba(255,255,255,.75); --glass-blur: saturate(1.6) blur(16px);
  /* type scale (minor third from 16) */
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 19px; --t-xl: 23px; --t-2xl: 28px;
  --font: 'Varela Round', 'Rubik', 'Arial Hebrew', 'DejaVu Sans', sans-serif; --font-num: 'Rubik', 'Varela Round', sans-serif;
  /* motion */
  --spring: cubic-bezier(.2,.9,.3,1.15); --ease: cubic-bezier(.3,.7,.2,1);
  /* tap target */
  --tap: 48px;
}