/*
 * Surrender School — Design Tokens
 * Single source of truth for fonts, colors, spacing.
 * All CSS files use var(--token) — no raw hex values in components.
 */

:root {

  /* ── Colors ─────────────────────────────────────────────────────────── */

  --color-slate:       #5F6C8F; /* Nav bg, dark UI elements               */
  --color-purple:      #825FD7; /* Buttons, accents, highlights            */
  --color-periwinkle:  #A4B8F5; /* Soft backgrounds, CTA gradient          */
  --color-sky:         #0FA6EF; /* Links only                              */
  --color-white:       #ffffff;
  --color-text:        #2D2D2D; /* Body text — high contrast neutral        */
  --color-text-muted:  #6B7280; /* Captions, meta, secondary labels        */
  --color-bg:          #ffffff; /* Page background                         */

  /* Alias — single accent reference used in components */
  --color-accent:      #825FD7;

  /* ── Typography ─────────────────────────────────────────────────────── */

  --font-heading: 'Libre Baskerville', Georgia, serif;
  --font-body:    'Inter', Arial, sans-serif;

  /* Sizes */
  --font-size-base: 1.125rem;    /* 18px — body default                   */
  --font-size-sm:   0.9375rem;   /* 15px — meta, captions                 */
  --font-size-lg:   1.25rem;     /* 20px                                  */
  --font-size-xl:   1.5rem;      /* 24px — H3                             */
  --font-size-2xl:  2rem;        /* 32px — H2                             */
  --font-size-3xl:  2.5rem;      /* 40px — H1                             */

  /* Weights */
  --font-weight-normal:   400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line heights */
  --line-height-body:    1.7;
  --line-height-heading: 1.25;

  /* ── Spacing (8px base unit) ────────────────────────────────────────── */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ── Breakpoints ────────────────────────────────────────────────────── */

  --breakpoint-mobile:  390px;
  --breakpoint-tablet:  768px;
  --breakpoint-desktop: 1280px;

}