:root {

  /* ══════════════════════════════════════════════
     FOUNDATION — Primitive values (from Figma)
     ══════════════════════════════════════════════ */

  /* ── Primitive Colors ── */
  --color-yellow:   #FFCE39;
  --color-blue:     #0AABE8;
  --color-pink:     #D94283;
  --color-black:    #191919;
  --color-white:    #FFFDF0;

  /* ── Size Scale ── */
  --size-050:  4px;
  --size-100:  8px;
  --size-150:  12px;
  --size-200:  16px;
  --size-300:  24px;
  --size-400:  32px;
  --size-500:  40px;
  --size-600:  48px;
  --size-700:  56px;
  --size-800:  64px;

  /* ── Font Families ── */
  --font-display: 'Work Sans', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', system-ui, sans-serif;

  /* ── Font Weights ── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-black:    900;


  /* ══════════════════════════════════════════════
     THEME — Semantic tokens
     ══════════════════════════════════════════════ */

  /* ── Colors (repo naming, Figma values) ── */
  --action:     var(--color-yellow);
  --ink:        var(--color-black);
  --ink-soft:   #373a3a;
  --ink-muted:  #888;
  --ocean:      var(--color-blue);
  --hibiscus:   var(--color-pink);
  --deepsea:    #1e4a52;
  --green:      #2ecc71;
  --orange:     #f39c12;
  --paper:      var(--color-white);
  --sand:       #e6e4da;

  /* ── Backgrounds ── */
  --bg:          #f5f4f0;
  --bg-mint:     #cfe4dc;
  --bg-mint-sat: #9bc7ba;
  --bg-top:      #92C8C2;
  --bg-mid:      #E6E4DA;

  /* ── Spacing ── */
  --space-2xs: var(--size-050);   /*  4px */
  --space-xs:  var(--size-100);   /*  8px */
  --space-sm:  var(--size-150);   /* 12px */
  --space-md:  var(--size-200);   /* 16px */
  --space-lg:  var(--size-300);   /* 24px */
  --space-xl:  var(--size-400);   /* 32px */
  --space-2xl: var(--size-500);   /* 40px */
  --space-3xl: var(--size-600);   /* 48px */
  --space-4xl: var(--size-800);   /* 64px */

  /* ── Font Size ── */
  --text-xs:      10px;
  --text-sm:      12px;            /* 11px → sm */
  --text-md:      14px;            /* body default */
  --text-lg:      18px;
  --text-xl:      24px;
  --text-2xl:     32px;
  --text-3xl:     48px;
  --text-display: 120px;

  /* ── Font Weight (semantic) ── */
  --text-weight-headline: var(--weight-black);     /* 900 */
  --text-weight-body:     var(--weight-medium);    /* 500 */
  --text-weight-button:   var(--weight-semibold);  /* 600 */

  /* ── Letter Spacing (Figma % → em) ── */
  --tracking-headline: -0.015em;   /* -1.5% */
  --tracking-body:     -0.01em;    /*   -1% */
  --tracking-button:   -0.005em;   /* -0.5% */
  --tracking-caps:      0.06em;    /* uppercase labels */

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-full: 9999px;
}