/* Design tokens — single source of truth for colour, type, spacing, radius. */

:root {
  /* Palette — surfaces & text (light theme — kid-friendly warm paper) */
  --colour-bg: #F6F4EF;
  --colour-surface: #FFFFFF;
  --colour-border: #E4E0D8;
  --colour-text-primary: #2B2926;
  --colour-text-secondary: #8B867E;

  /* Palette — semantic (darkened for contrast on light surfaces) */
  --colour-accent: #2196F3;
  --colour-success: #43A047;
  --colour-warning: #F59E0B;
  --colour-danger: #E53935;

  /* WarmUp brand amber — matches the app icon (amber tile, white star).
     Used for the flower's centre brand tile and the HUD ★ pill. */
  --colour-brand: #FFB74D;
  --colour-brand-deep: #FB8C00;

  /* Lattice — thin ring on each ghost cell is the line; the gap between
     cells is a quiet padding zone, not part of the line weight */
  --colour-grid-line: color-mix(in srgb, var(--colour-border) 85%, var(--colour-text-secondary));
  --colour-grid-bg: color-mix(in srgb, var(--colour-border) 35%, var(--colour-bg));

  /* Default activity colours */
  --activity-reading: #4FC3F7;
  --activity-maths: #69D98C;
  --activity-music: #CE93D8;
  --activity-sport: #FFB74D;
  --activity-other: #90A4AE;

  /* Typography */
  --font-display: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.15;
  --line-height-normal: 1.4;
  --line-height-loose: 1.6;

  /* Spacing scale — 4px base */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* Border radius */
  --radius-cell: 6px;
  --radius-button: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;

  /* Hex tile sizing — viewport-adaptive: the 5-row flower plus one full
     ghost ring must fit the pane height (flower ≈ 6.35 hex-widths tall
     incl. ring). Tiles stay at 132px max, shrinking only when needed. */
  --hex-w: clamp(80px, calc((100vh - 56px) / 6.4), 132px);
  --hex-h: calc(var(--hex-w) * 1.1547);
  --hex-gap: 5px;
  --hex-outline: 2px;

  /* Misc */
  --tap-target-min: 44px;
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
}

@media (max-width: 1024px) {
  :root {
    --hex-w: clamp(72px, calc((100vh - 56px) / 6.4), 116px);
    --hex-gap: 4px;
  }
}

@media (max-width: 720px) {
  :root {
    /* Compact flower on phones — portrait has height to spare but the flower
       reads better small; cap 96 → 66 → 54 (decision #56, tuned 2026-06-15).
       Tighter height divisor (10.5) so shorter viewports shrink it more too. */
    --hex-w: clamp(42px, calc((100vh - 56px) / 10.5), 54px);
    --hex-gap: 3px;
  }
}

html,
body {
  background: var(--colour-bg);
  color: var(--colour-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  /* No double-tap zoom anywhere (it broke game taps); scroll/pan still work.
     The viewport meta blocks pinch too — this covers browsers that override
     it (e.g. Chrome's "force enable zoom" accessibility setting). */
  touch-action: manipulation;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}