/* SEL Design Tokens — Brand Guidelines v1.0 (April 2026) */
:root {
  /* Brand colours */
  --sel-green: #04D6A0;
  --sel-green-ink: #037A5B;       /* type on green, eyebrow labels */
  --sel-blue: #416195;            /* Queen Blue, footers */
  --sel-blue-ink: #2A416A;        /* display headlines */
  --sel-salmon: #F58B6C;          /* warm CTA */
  --sel-yellow: #EDCE6D;          /* sunlight accent */

  /* Warm neutrals */
  --sel-paper: #FAF7F0;           /* default page bg */
  --sel-paper-2: #F4EFE3;         /* alt section bg */
  --sel-alabaster: #EAEAEA;       /* card fill, dividers */
  --sel-ink: #1D1F1C;             /* body text */
  --sel-ink-3: #6A7269;           /* meta, timestamps */
  --sel-line: #E4E2DB;            /* 1px dividers */

  /* Semantic surface */
  --sel-green-mist: color-mix(in srgb, var(--sel-green) 12%, var(--sel-paper));
  --sel-salmon-wash: color-mix(in srgb, var(--sel-salmon) 10%, var(--sel-paper));

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;

  /* Radii */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-arch: 999px 999px 24px 24px;  /* signature arched card/photo */
  --r-pill: 999px;

  /* Shadows (warm, never rgba(0,0,0,*)) */
  --shadow-sm: 0 2px 8px rgba(29,31,28,0.06);
  --shadow-md: 0 4px 20px rgba(29,31,28,0.08);
  --shadow-lg: 0 8px 32px rgba(29,31,28,0.12);
  --shadow-cta: 0 4px 16px rgba(4,214,160,0.22);
  --shadow-salmon: 0 4px 16px rgba(245,139,108,0.28);

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-micro: 200ms;
  --dur-card: 320ms;
  --dur-page: 520ms;

  /* Layout */
  --max-w: 1200px;
  --section-pad: clamp(3rem, 7vw, 7rem);
  --gutter: clamp(1rem, 4vw, 2rem);
}