:root {

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

  /* Primary Scale */
  --primary-base:              #39F718;
  --primary-tone:              #52CD3C;   /* slightly muted / mid-dark */
  --primary-shade:             #1F880D;   /* darkest variant           */
  --primary-tint:              #6BF952;   /* lightest / brightest      */

  /* Complementary Scale */
  --complementary-base:        #C608E7;
  --complementary-tone:        #AD32C3;
  --complementary-shade:       #6D057F;
  --complementary-tint:        #D446ED;

  --neutral-50:                #0D0F12;   /* Deepest background            — target ~5–7% lightness  */
  --neutral-100:               #12151A;   /* Sunken / inset surfaces       — target ~8–10% lightness */
  --neutral-200:               #181C22;   /* Default body background       — target ~11–13% lightness */
  --neutral-300:               #222831;   /* Raised surface (cards)        — target ~15–18% lightness */
  --neutral-400:               #2B333D;   /* Banner / nav background       — target ~18–22% lightness */
  --neutral-500:               #46515F;   /* Borders, dividers             — target ~28–33% lightness */
  --neutral-600:               #667384;   /* Disabled text, placeholders   — target ~40–45% lightness */
  --neutral-700:               #8D99A8;   /* Secondary / muted text        — target ~55–60% lightness */
  --neutral-800:               #C2CAD4;   /* Body text on dark surfaces    — target ~75–80% lightness */
  --neutral-900:               #EEF2F7;   /* Primary text / high-emphasis  — target ~92–96% 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:          var(--neutral-300);
  --color-bg-overlay:          rgba(13, 15, 18, 0.82);
  --color-bg-hover:            var(--neutral-400);

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

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

  /* — Actions — */
  --color-action-default:      var(--primary-base);
  --color-action-hover:        var(--primary-tint);
  --color-action-pressed:      var(--primary-shade);
  --color-action-subtle:       rgba(57, 247, 24, 0.18);

  /* — Accent — */
  --color-accent-default:      var(--complementary-base);
  --color-accent-hover:        var(--complementary-tint);
  --color-accent-pressed:      var(--complementary-shade);
  --color-accent-subtle:       rgba(198, 8, 231, 0.18);

  /* — Feedback — */
  --color-feedback-error:      #FF5D73;
  --color-feedback-error-bg:   #3A1118;   /* very dark tint, for dark surfaces */
  --color-feedback-success:    #52CD3C;
  --color-feedback-success-bg: #132A12;
  --color-feedback-warning:    #F5B83D;
  --color-feedback-warning-bg: #3A2A10;
  --color-feedback-info:       #58A6FF;
  --color-feedback-info-bg:    #10263F;

  /* — Headings — */
  --color-heading-primary:     var(--neutral-900);
  --color-heading-secondary:   var(--neutral-800);
  --color-heading-accent:      var(--primary-tint);

  /*
     FONT TOKENS — populated at page-creation time
  */

  /* — Font Families — */
  --font-family-base:          'Space Grotesk', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-heading:       'Space Grotesk', '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;
  --font-size-sm:              0.875rem;
  --font-size-md:              1rem;
  --font-size-lg:              1.125rem;
  --font-size-xl:              1.25rem;
  --font-size-2xl:             1.5rem;
  --font-size-3xl:             1.875rem;
  --font-size-4xl:             2.25rem;
  --font-size-5xl:             3rem;

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

  /* — Line Heights — */
  --line-height-tight:         1.25;
  --line-height-base:          1.5;
  --line-height-loose:         1.75;

  /* — Letter Spacing — */
  --letter-spacing-tight:      -0.02em;
  --letter-spacing-normal:     0em;
  --letter-spacing-wide:       0.05em;
  --letter-spacing-wider:      0.1em;
}