/*
  Design tokens for the Grade 2 Practice Site.
  Proportions are tuned against a 1920x1080 reference viewport, but the
  root font-size scales fluidly so the layout stays usable on smaller
  windows and tablets without a fixed canvas or letterboxing.
*/

:root {
  /* Color: high-contrast, kid-friendly palette (WCAG AA+ on white/surface) */
  --color-primary: #2f6fed;       /* Math blue */
  --color-primary-dark: #1e4fb8;
  --color-secondary: #d6336c;      /* ELA pink */
  --color-success: #1f9d55;
  --color-success-bg: #e4f8ec;
  --color-error: #e8592e;         /* warm coral, not harsh red */
  --color-error-bg: #fdeae3;
  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-text: #1c2333;
  --color-text-muted: #5b6478;
  --color-border: #d9deea;
  --color-focus-ring: #ffb703;

  /* Rainbow accent palette for subject/unit cards on the landing page */
  --color-rainbow-red: #ff6b6b;
  --color-rainbow-orange: #f59f00;
  --color-rainbow-yellow: #f5c400;
  --color-rainbow-green: #37b24d;
  --color-rainbow-teal: #15aabf;
  --color-rainbow-blue: #2f6fed;
  --color-rainbow-purple: #7950f2;
  --color-rainbow-pink: #d6336c;

  /* Spacing scale: 4px base grid, expressed in rem */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 6rem;      /* 96px */

  /* Type scale */
  --font-family-base: 'Baloo 2', 'Comic Sans MS', system-ui, sans-serif;
  --font-size-sm: 0.9rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.5rem;
  --font-size-display: 3.5rem;

  /* Radii & shadows */
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 4px 16px rgba(28, 35, 51, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(28, 35, 51, 0.14);

  /* Touch targets */
  --target-min-height: 64px;
}

/*
  Fluid root sizing: resolves near 20px at a 1920px-wide viewport
  (the "just right at Full HD" target) and scales down gracefully on
  smaller windows/tablets.
*/
html {
  font-size: clamp(16px, 0.6vw + 14px, 20px);
}