/* ==========================================================
   Elise Myette · Design tokens
   The single source of truth for colour, type, space, shape
   and motion. Components in style.css must only use these.
   See DESIGN.md for usage rules.
   ========================================================== */

:root {
  /* ---------- Colour: brand ---------- */
  --c-ink: #1b1b37;        /* text, borders, pop shadows */
  --c-blue: #4541fe;       /* primary accent, marquee, contact */
  --c-pink: #f0188c;       /* highlight accent: scribbles, underlines, large type */
  --c-pink-strong: #c71474;/* pink surfaces/labels carrying small text (AA contrast) */
  --c-yellow: #ffc66c;     /* sticky notes, highlights on dark */
  --c-red: #ff6b6b;        /* tertiary accent (case numbers) */
  --c-white: #ffffff;      /* cards, polaroid frames */
  --c-paper: #fbfbfd;      /* page background */
  --c-grey: #e2e2e2;       /* subtle fills, hovers */

  /* ---------- Colour: tints & utility ---------- */
  --c-blue-10: rgba(69, 65, 254, .10);
  --c-pink-10: rgba(240, 24, 140, .10);
  --c-yellow-25: rgba(255, 198, 108, .25);
  --c-ink-25: rgba(27, 27, 55, .25);
  --c-ink-90: rgba(27, 27, 55, .92);
  --c-grid: rgba(69, 65, 254, .06);         /* notebook grid lines */
  --c-screen: #2a2a4a;                       /* phone screen before media loads */
  --c-white-glass: rgba(255, 255, 255, .88);

  /* ---------- Type: families ---------- */
  --font-body: 'Poppins', Helvetica, Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-hand: 'Caveat', 'Comic Sans MS', cursive;

  /* ---------- Type: scale (fluid where it matters) ---------- */
  --fs-xs: 0.75rem;                                   /* 12  tags, badges */
  --fs-sm: 0.875rem;                                  /* 14  chips, meta */
  --fs-base: 1rem;                                    /* 16  body */
  --fs-md: 1.125rem;                                  /* 18  lede, subs */
  --fs-lg: 1.25rem;                                   /* 20  small headings */
  --fs-hand: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); /* 22–28 handwriting */
  --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);     /* 24–30 card titles */
  --fs-2xl: clamp(2.5rem, 2rem + 2.4vw, 3.75rem);     /* 40–60 stat numbers */
  --fs-3xl: clamp(2.5rem, 1.6rem + 4.4vw, 5.25rem);   /* 40–84 section titles */
  --fs-4xl: clamp(2.6rem, 1.5rem + 5.6vw, 6.5rem);    /* 42–104 hero */
  --fs-5xl: clamp(3.25rem, 1.8rem + 7.4vw, 8.25rem);  /* 52–132 contact */

  --lh-tight: .95;
  --lh-snug: 1.1;
  --lh-body: 1.6;
  --tracking-display: -.03em;
  --tracking-label: .08em;

  /* ---------- Space (4px base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 96px;
  --sp-12: 128px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(64px, 9vw, 128px);
  --max: 1240px;

  /* ---------- Shape ---------- */
  --r-paper: 4px;    /* polaroids, sticky notes */
  --r-sm: 8px;
  --r-md: 12px;      /* photos, posts */
  --r-lg: 20px;      /* cards, boards */
  --r-pill: 999px;   /* buttons, chips, nav */
  --bw: 2px;         /* every outline is 2px ink */
  --border: var(--bw) solid var(--c-ink);

  /* ---------- Elevation ---------- */
  --pop-sm: 3px 3px 0 var(--c-ink);
  --pop: 4px 4px 0 var(--c-ink);
  --pop-lg: 8px 8px 0 var(--c-ink);
  --lift: 0 18px 40px -12px rgba(27, 27, 55, .35);
  --lift-sm: 0 10px 24px -8px rgba(27, 27, 55, .45);

  /* ---------- Playfulness ---------- */
  --tilt-xs: 1.5deg;
  --tilt-sm: 3deg;
  --tilt-md: 6deg;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .2s;
  --dur: .35s;
  --dur-slow: .7s;

  /* ---------- Layers ---------- */
  --z-raised: 5;
  --z-sticky: 100;
  --z-progress: 120;
  --z-overlay: 300;
  --z-toast: 400;

  /* ---------- Hit targets ---------- */
  --tap: 44px;

  /* Breakpoints (for reference; media queries can't read vars):
     sm 480px · md 768px · lg 1024px · xl 1280px */

  color-scheme: light;
}