/* 
   DESIGN TOKENS
*/
:root {

  /* ── Primitives · Neutral scale ────────────────────
     Achromatic ramp (R=G=B). Anchors given by hand;
     blank stops filled by linear-luminance interpolation.
     Mono-decreasing brightness 253 → 20.            */
  --white:    #FFFFFF;
  --grey-50:  #FDFDFD;   
  --grey-100: #F1F0F0;  
  --grey-200: #C7C7C7;   
  --grey-300: #ADADAD;  
  --grey-400: #929292;   
  --grey-500: #777777;   
  --grey-600: #5E5E5E;   
  --grey-700: #474747;   
  --grey-800: #303030;   
  --grey-900: #141414;  
  --black:    #000000;

  /* ── Color · Surface ───────────────────────────── */
  --bg: var(--grey-50);   /* page background (warm taupe) */
  --off-white:    var(--grey-100);   /* off-white (reserved)         */

  /* ── Color · Text ──────────────────────────────── */
  --text:         var(--grey-900);   /* primary                       */
  --text-dim:     var(--grey-700);   /* secondary (detail body)       */
  --text-muted:   var(--grey-500);   /* tertiary (labels, meta)       */

  /* ── Color · Border ────────────────────────────── */
  --border:       var(--grey-100);
  --border-light: var(--grey-300);   /* alias — same value today      */

  /* ── Color · Accent (project tag highlight) ────── */
  --tag-accent-bg: #F2F6FF;   /* light green */
  --tag-accent-fg: #6384E2;   /* dark green  */

  /* ── Typography · Families ─────────────────────── */
  /* All text is Inter. Aliases kept so component CSS need not change. */
  --font-sans:       'Inter', system-ui, -apple-system, sans-serif;
  --font-display:    var(--font-sans);   /* UI / headings   */
  --font-serif:      var(--font-sans);   /* (reserved)      */
  --font-hero:       var(--font-sans);   /* hero h1         */
  --font-body-serif: var(--font-sans);   /* long-form body  */

  /* ── Typography · Scale (size / line-height) ───────
 */
  --title-1-size: 28px;   --title-1-line: 34px;
  --title-2-size: 24px;   --title-2-line: 30px;
  --title-3-size: 18px;   --title-3-line: 24px;
  --body-1-size:  16px;   --body-1-line:  22px;
  --body-2-size:  14px;   --body-2-line:  20px;
  --caption-1-size: 12px; --caption-1-line: 18px;
  --caption-2-size: 11px; --caption-2-line: 16px;

  /* ── Typography · Tracking (fixed, all styles) ─── */
  --tracking-tight: -0.01em;
  --tracking: -0.004em;

  /* ── Typography · Weight (received separately) ─── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ── Component · Button (nav CTA) ──────────────── */
  --btn-radius:   100px;            /* pill                */
  --btn-pad-y:    8px;
  --btn-pad-x:    18px;
  --btn-bg:       var(--grey-100);
  --btn-bg-hover: var(--grey-900);   /* invert on hover */
  --btn-fg:       var(--grey-900);
  --btn-fg-hover: var(--white);      /* text flips light */

  /* ── Layout ────────────────────────────────────── */
  --max-width:  1400px;
  --gutter:     48px;        /* desktop horizontal padding */
  --gutter-sm:  24px;        /* mobile horizontal padding  */

  /* ── Motion ────────────────────────────────────── */
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --blur-nav:   12px;        /* nav backdrop blur          */

  

}