:root {

  /*
   BASE TOKENS — raw values, not consumed directly in UI
  */

  /* Primary Scale */
  --primary-base:              #D96B40;
  --primary-tone:              #BA7256;   /* slightly muted / mid-light */
  --primary-shade:             #773B23;   /* darkest variant            */
  --primary-tint:              #E29070;   /* lightest / most washed out */

  /* Complementary Scale */
  --complementary-base:        #2694BF;
  --complementary-tone:        #458DA9;
  --complementary-shade:       #155169;
  --complementary-tint:        #5CAFCF;

  --neutral-50:                #FCFCFD;   /* Lightest background           — target ~97–99% lightness */
  --neutral-100:               #F3F4F6;   /* Sunken / inset surfaces       — target ~93–95% lightness */
  --neutral-200:               #E5E7EB;   /* Default body background       — target ~88–91% lightness */
  --neutral-300:               #D1D5DB;   /* Raised surface (cards)        — target ~82–86% lightness */
  --neutral-400:               #9CA3AF;   /* Banner / nav background       — target ~75–80% lightness */
  --neutral-500:               #6B7280;   /* Borders, dividers             — target ~60–65% lightness */
  --neutral-600:               #4B5563;   /* Disabled text, placeholders   — target ~45–50% lightness */
  --neutral-700:               #374151;   /* Secondary / muted text        — target ~30–35% lightness */
  --neutral-800:               #1F2937;   /* Body text on light surfaces   — target ~15–20% lightness */
  --neutral-900:               #111827;   /* Primary text / high-emphasis  — target ~5–8%  lightness */

  /* ────────────────────────────────────────────────────────
     SEMANTIC TOKENS — these are what UI components consume
     ──────────────────────────────────────────────────────── */

  /* — Backgrounds — */
  --color-bg-page:             var(--neutral-200);
  --color-bg-sunken:           var(--neutral-100);
  --color-bg-surface:          #FFFFFF;
  --color-bg-overlay:          rgba(17, 24, 39, 0.55);
  --color-bg-hover:            var(--neutral-100);

  /* — Borders — */
  --color-border-default:      var(--neutral-300);
  --color-border-subtle:       var(--neutral-200);
  --color-border-focus:        var(--complementary-base);
  --color-border-accent:       var(--primary-base);

  /* — Text — */
  --color-text-primary:        var(--neutral-900);
  --color-text-secondary:      var(--neutral-700);
  --color-text-muted:          var(--neutral-600);
  --color-text-disabled:       var(--neutral-500);
  --color-text-on-action:      #FFFFFF;   /* contrast-safe on primary-base       */
  --color-text-on-accent:      #0B1A22;   /* contrast-safe on complementary-base */

  /* — Actions — */
  --color-action-default:      var(--primary-base);
  --color-action-hover:        var(--primary-tone);
  --color-action-pressed:      var(--primary-shade);
  --color-action-subtle:       #FBEDE7;

  /* — Accent — */
  --color-accent-default:      var(--complementary-base);
  --color-accent-hover:        var(--complementary-tone);
  --color-accent-pressed:      var(--complementary-shade);
  --color-accent-subtle:       #E8F5FA;

  /* — Feedback — */
  --color-feedback-error:      #B42318;
  --color-feedback-error-bg:   #FEE4E2;   /* very light tint, for light surfaces */
  --color-feedback-success:    #027A48;
  --color-feedback-success-bg: #ECFDF3;
  --color-feedback-warning:    #B54708;
  --color-feedback-warning-bg: #FFFAEB;
  --color-feedback-info:       #175CD3;
  --color-feedback-info-bg:    #EFF8FF;

  /* — Headings — */
  --color-heading-primary:     var(--neutral-900);
  --color-heading-secondary:   var(--neutral-800);
  --color-heading-accent:      var(--primary-shade);
  
  /*
     FONT TOKENS — populated at page-creation time
  */

  /* — Font Families — */
  --font-family-base:          'Manrope', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-heading:       'Manrope', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono:          'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* — Font Sizes — */
  --font-size-xs:              0.75rem;   /* e.g. 0.75rem  — labels, captions     */
  --font-size-sm:              0.875rem;  /* e.g. 0.875rem — secondary text       */
  --font-size-md:              1rem;      /* e.g. 1rem     — base / body          */
  --font-size-lg:              1.125rem;  /* e.g. 1.125rem — large body / sub-h   */
  --font-size-xl:              1.25rem;   /* e.g. 1.25rem  — h4                   */
  --font-size-2xl:             1.5rem;    /* e.g. 1.5rem   — h3                   */
  --font-size-3xl:             1.875rem;  /* e.g. 1.875rem — h2                   */
  --font-size-4xl:             2.25rem;   /* e.g. 2.25rem  — h1                   */
  --font-size-5xl:             3rem;      /* e.g. 3rem     — hero / display       */

  /* — Font Weights — */
  --font-weight-regular:       400;   /* e.g. 400 */
  --font-weight-medium:        500;   /* e.g. 500 */
  --font-weight-semibold:      600;   /* e.g. 600 */
  --font-weight-bold:          700;   /* e.g. 700 */

  /* — Line Heights — */
  --line-height-tight:         1.25;  /* e.g. 1.25 — headings          */
  --line-height-base:          1.5;   /* e.g. 1.5  — body text         */
  --line-height-loose:         1.75;  /* e.g. 1.75 — relaxed / prose   */

  /* — Letter Spacing — */
  --letter-spacing-tight:      -0.02em; /* e.g. -0.02em — display headings  */
  --letter-spacing-normal:     0em;     /* e.g.  0em                        */
  --letter-spacing-wide:       0.05em;  /* e.g.  0.05em — caps, labels      */
  --letter-spacing-wider:      0.1em;   /* e.g.  0.1em  — uppercase tags    */
  
}