/* RAISE Learning — shared design tokens.
   Colours, type and radii for every page live here; page-specific
   layout/component styles stay in each page's own <style> block. */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Work+Sans:ital,wght@0,300..600;1,300..600&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
  /* Brand colours */
  --color-ink: #1B2340;
  --color-ink-light: #2A3560;
  --color-paper: #FAF6EE;
  --color-marker: #D6284A;
  --color-marker-dark: #B81F3D;
  --color-marker-tint: rgba(214, 40, 74, 0.12);
  /* Desaturated Marker for the rare case a Marker wordmark/logo sits on an Ink
     surface — full-saturation Marker directly on full-saturation Ink clashes. */
  --color-marker-on-dark: #E4738A;
  --color-sage: #3F7267;
  --color-sage-tint: rgba(63, 114, 103, 0.12);
  --color-sage-on-dark: #8CAAA4;
  --color-highlighter: #FFD23F;
  --color-mist: #E4E1D6;

  /* Surfaces */
  --bg-page: var(--color-paper);
  --bg-surface: #FFFFFF;
  --bg-subtle: var(--color-mist);

  /* Text */
  --text-primary: var(--color-ink);
  --text-secondary: rgba(27, 35, 64, 0.65);
  --text-tertiary: rgba(27, 35, 64, 0.45);
  --text-on-dark: rgba(255, 255, 255, 0.85);
  --text-on-dark-soft: rgba(255, 255, 255, 0.55);

  /* Borders */
  --border: var(--color-mist);
  --border-mid: rgba(27, 35, 64, 0.22);

  /* Radii */
  --radius-md: 10px;
  --radius: 12px;
  --radius-lg: 18px;

  /* Typography */
  --font-display: 'Lora', serif;
  --font-body: 'Work Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}