/* ─── Design tokens ────────────────────────────────────────────────────────── */
:root {
  /* Brand colours — derived from Free to Learn logo (blue #0056b3, red #d93025, yellow #fbbc05) */
  /* Overridden by admin ThemeConfig via inline style */
  --colour-primary:       #1a6bbf;
  --colour-primary-dark:  #0d56a0;
  --colour-primary-light: #4d91d6;
  --colour-accent:        #f5a623;
  --colour-accent-dark:   #d98f10;

  /* Semantic colours */
  --colour-success:  #2d8a4e;
  --colour-warning:  #b87d2c;
  --colour-danger:   #d93025;
  --colour-info:     #2980b9;

  /* Surfaces — warm cream palette for a relaxed, welcoming feel */
  --colour-bg:          #fffbf4;
  --colour-surface:     #ffffff;
  --colour-surface-alt: #fff5e6;
  --colour-border:      #e8dbc8;
  --colour-shadow:      rgba(26, 107, 191, 0.08);

  /* Text */
  --colour-text:       #1e2b3d;
  --colour-text-muted: #6b7a8d;
  --colour-text-inv:   #ffffff;

  /* Typography — Nunito for a friendly, rounded feel */
  --font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Fira Code', 'Cascadia Code', Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;
  --font-size-4xl: 3rem;
  --line-height-body: 1.65;
  --line-height-heading: 1.2;

  /* Spacing — slightly generous for a relaxed layout */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;

  /* Borders — rounder for a playful, friendly feel */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Shadows — softer, warm-tinted */
  --shadow-sm:  0 2px 6px var(--colour-shadow);
  --shadow-md:  0 6px 16px var(--colour-shadow);
  --shadow-lg:  0 12px 32px var(--colour-shadow);

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 720px;
  --nav-height: 68px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-med:  250ms ease;

  /* Seasonal gradient — logo blue to warm amber */
  --seasonal-gradient: linear-gradient(135deg, var(--colour-primary) 0%, var(--colour-accent) 100%);
}