/* ---------------------------------------------------------------------------
   Design system tokens — dark-first
   Source of truth. Plain CSS custom properties, --ds- prefixed. Fraunces/Inter
   remote @import removed: the page's CSP is style-src 'self'; font-src 'self',
   so we fall back to the local font stacks already defined in Layer 4 (Georgia
   for the serif voice, system UI fonts for sans) instead of self-hosting files.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   LAYER 1 — Raw palette. Mode-stable: these hexes never change.
   =========================================================================== */

:root {
  /* Aubergine. 300 is the dark-mode accent, 500 the dark fill, 600 the light fill. */
  --ds-aubergine-50:  #faf3f7;
  --ds-aubergine-100: #f2e0ea;
  --ds-aubergine-200: #e3c2d3;
  --ds-aubergine-300: #c48fab;
  --ds-aubergine-400: #a66c8b;
  --ds-aubergine-500: #8e5876;
  --ds-aubergine-600: #7a4a63;
  --ds-aubergine-700: #613a4f;
  --ds-aubergine-800: #482b3a;
  --ds-aubergine-900: #301d27;
  --ds-aubergine-950: #1e1219;

  /* Neutrals. Warm, with a whisper of magenta so they sit under aubergine
     rather than beside it. Never pure grey, never pure black. */
  --ds-neutral-0:   #ffffff;
  --ds-neutral-25:  #fbf9fa;
  --ds-neutral-50:  #ede8eb;
  --ds-neutral-100: #ddd6da;
  --ds-neutral-200: #c4bcc1;
  --ds-neutral-300: #a79fa4;
  --ds-neutral-400: #8a8288;
  --ds-neutral-450: #918990;
  --ds-neutral-500: #6b6469;
  --ds-neutral-600: #4e484c;
  --ds-neutral-700: #3a3538;
  --ds-neutral-750: #322d31;
  --ds-neutral-800: #2a2629;
  --ds-neutral-850: #232022;
  --ds-neutral-900: #1d1a1c;
  --ds-neutral-950: #171416;

  /* Semantic hues. Aubergine collides with none of these, so the full set survives. */
  --ds-green-300:  #6fc796;
  --ds-green-500:  #3e8a5f;
  --ds-green-600:  #2f7350;
  --ds-green-700:  #24603f;
  --ds-green-900:  #16301f;
  --ds-green-50:   #e6f2ea;

  --ds-amber-300:  #e2ae4e;
  --ds-amber-500:  #b8862b;
  --ds-amber-600:  #9a6e1e;
  --ds-amber-700:  #7c5716;
  --ds-amber-900:  #33260d;
  --ds-amber-50:   #faf1df;

  --ds-red-300:    #e58179;
  --ds-red-500:    #b04a42;
  --ds-red-600:    #97362f;
  --ds-red-700:    #7f2c26;
  --ds-red-900:    #331a18;
  --ds-red-50:     #f8e9e7;

  --ds-blue-300:   #7faed4;
  --ds-blue-500:   #3e6f99;
  --ds-blue-600:   #2f5c80;
  --ds-blue-700:   #274d6b;
  --ds-blue-900:   #16283a;
  --ds-blue-50:    #e8f0f7;
}

/* ===========================================================================
   LAYER 2 — Purpose tokens. DARK IS THE DEFAULT.
   Components read only from this layer.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* Surfaces. 0 is the page, 1-3 step toward the viewer. */
  --ds-surface-0: var(--ds-neutral-900);
  --ds-surface-1: var(--ds-neutral-850);
  --ds-surface-2: var(--ds-neutral-800);
  --ds-surface-3: var(--ds-neutral-750);
  --ds-page-bg:   var(--ds-neutral-950);

  /* Text. Never pure white on dark — halation eats the stroke weight. */
  --ds-text-primary:   var(--ds-neutral-50);
  --ds-text-secondary: var(--ds-neutral-300);
  --ds-text-muted:     var(--ds-neutral-450);
  --ds-text-disabled:  var(--ds-neutral-500);

  /* Borders. Hairlines carry the structure; shadows are near-absent by design. */
  --ds-border:         rgba(237, 232, 235, 0.10);
  --ds-border-strong:  rgba(237, 232, 235, 0.18);
  --ds-border-stronger:rgba(237, 232, 235, 0.30);

  /* Accent. On dark the accent walks up its ramp: fill 500, text 300. */
  --ds-fill-accent:       var(--ds-aubergine-500);
  --ds-fill-accent-hover: var(--ds-aubergine-400);
  --ds-bg-accent:         var(--ds-aubergine-900);
  --ds-border-accent:     var(--ds-aubergine-700);
  --ds-text-accent:       var(--ds-aubergine-300);
  --ds-on-accent:         var(--ds-aubergine-50);

  --ds-fill-success: var(--ds-green-500);
  --ds-bg-success:   var(--ds-green-900);
  --ds-text-success: var(--ds-green-300);
  --ds-on-success:   var(--ds-neutral-950);

  --ds-fill-warning: var(--ds-amber-500);
  --ds-bg-warning:   var(--ds-amber-900);
  --ds-text-warning: var(--ds-amber-300);
  --ds-on-warning:   var(--ds-neutral-950);

  --ds-fill-danger:  var(--ds-red-500);
  --ds-bg-danger:    var(--ds-red-900);
  --ds-text-danger:  var(--ds-red-300);
  --ds-on-danger:    var(--ds-neutral-50);

  --ds-fill-info:    var(--ds-blue-500);
  --ds-bg-info:      var(--ds-blue-900);
  --ds-text-info:    var(--ds-blue-300);
  --ds-on-info:      var(--ds-neutral-50);

  /* Neutral controls */
  --ds-fill-neutral:       rgba(237, 232, 235, 0.08);
  --ds-fill-neutral-hover: rgba(237, 232, 235, 0.13);
  --ds-fill-field:         rgba(237, 232, 235, 0.05);

  --ds-focus-ring: 0 0 0 2px var(--ds-page-bg), 0 0 0 4px var(--ds-aubergine-400);

  /* Body text gains a step in dark. Halation costs apparent weight. */
  --ds-font-size-body:   1rem;
  --ds-font-weight-body: 450;
}

/* ===========================================================================
   LAYER 3 — Light mode. Derived, but a first-class deliverable.
   Applies on OS preference, or force with data-theme on <html>.
   =========================================================================== */

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;

    --ds-surface-0: var(--ds-neutral-25);
    --ds-surface-1: #f5f2f4;
    --ds-surface-2: var(--ds-neutral-0);
    --ds-surface-3: var(--ds-neutral-0);
    --ds-page-bg:   #fbf9fa;

    --ds-text-primary:   var(--ds-neutral-900);
    --ds-text-secondary: #5e575c;
    --ds-text-muted:     #6f686d;
    --ds-text-disabled:  var(--ds-neutral-300);

    --ds-border:          rgba(29, 26, 28, 0.10);
    --ds-border-strong:   rgba(29, 26, 28, 0.18);
    --ds-border-stronger: rgba(29, 26, 28, 0.32);

    --ds-fill-accent:       var(--ds-aubergine-600);
    --ds-fill-accent-hover: var(--ds-aubergine-700);
    --ds-bg-accent:         var(--ds-aubergine-100);
    --ds-border-accent:     var(--ds-aubergine-200);
    --ds-text-accent:       var(--ds-aubergine-700);
    --ds-on-accent:         var(--ds-aubergine-50);

    --ds-fill-success: var(--ds-green-600);
    --ds-bg-success:   var(--ds-green-50);
    --ds-text-success: var(--ds-green-700);
    --ds-on-success:   var(--ds-neutral-0);

    --ds-fill-warning: var(--ds-amber-600);
    --ds-bg-warning:   var(--ds-amber-50);
    --ds-text-warning: var(--ds-amber-700);
    --ds-on-warning:   var(--ds-neutral-0);

    --ds-fill-danger:  var(--ds-red-600);
    --ds-bg-danger:    var(--ds-red-50);
    --ds-text-danger:  var(--ds-red-700);
    --ds-on-danger:    var(--ds-neutral-0);

    --ds-fill-info:    var(--ds-blue-600);
    --ds-bg-info:      var(--ds-blue-50);
    --ds-text-info:    var(--ds-blue-700);
    --ds-on-info:      var(--ds-neutral-0);

    --ds-fill-neutral:       rgba(29, 26, 28, 0.05);
    --ds-fill-neutral-hover: rgba(29, 26, 28, 0.09);
    --ds-fill-field:         var(--ds-neutral-0);

    --ds-focus-ring: 0 0 0 2px var(--ds-page-bg), 0 0 0 4px var(--ds-aubergine-500);

    --ds-font-size-body:   0.9375rem;
    --ds-font-weight-body: 400;
  }
}

:root[data-theme='light'] {
  color-scheme: light;

  --ds-surface-0: var(--ds-neutral-25);
  --ds-surface-1: #f5f2f4;
  --ds-surface-2: var(--ds-neutral-0);
  --ds-surface-3: var(--ds-neutral-0);
  --ds-page-bg:   #fbf9fa;

  --ds-text-primary:   var(--ds-neutral-900);
  --ds-text-secondary: #5e575c;
  --ds-text-muted:     #6f686d;
  --ds-text-disabled:  var(--ds-neutral-300);

  --ds-border:          rgba(29, 26, 28, 0.10);
  --ds-border-strong:   rgba(29, 26, 28, 0.18);
  --ds-border-stronger: rgba(29, 26, 28, 0.32);

  --ds-fill-accent:       var(--ds-aubergine-600);
  --ds-fill-accent-hover: var(--ds-aubergine-700);
  --ds-bg-accent:         var(--ds-aubergine-100);
  --ds-border-accent:     var(--ds-aubergine-200);
  --ds-text-accent:       var(--ds-aubergine-700);
  --ds-on-accent:         var(--ds-aubergine-50);

  --ds-fill-success: var(--ds-green-600);
  --ds-bg-success:   var(--ds-green-50);
  --ds-text-success: var(--ds-green-700);
  --ds-on-success:   var(--ds-neutral-0);

  --ds-fill-warning: var(--ds-amber-600);
  --ds-bg-warning:   var(--ds-amber-50);
  --ds-text-warning: var(--ds-amber-700);
  --ds-on-warning:   var(--ds-neutral-0);

  --ds-fill-danger:  var(--ds-red-600);
  --ds-bg-danger:    var(--ds-red-50);
  --ds-text-danger:  var(--ds-red-700);
  --ds-on-danger:    var(--ds-neutral-0);

  --ds-fill-info:    var(--ds-blue-600);
  --ds-bg-info:      var(--ds-blue-50);
  --ds-text-info:    var(--ds-blue-700);
  --ds-on-info:      var(--ds-neutral-0);

  --ds-fill-neutral:       rgba(29, 26, 28, 0.05);
  --ds-fill-neutral-hover: rgba(29, 26, 28, 0.09);
  --ds-fill-field:         var(--ds-neutral-0);

  --ds-focus-ring: 0 0 0 2px var(--ds-page-bg), 0 0 0 4px var(--ds-aubergine-500);

  --ds-font-size-body:   0.9375rem;
  --ds-font-weight-body: 400;
}

/* ===========================================================================
   LAYER 4 — Type, space, radius. Mode-invariant.
   =========================================================================== */

:root {
  --ds-font-voice: Georgia, 'Times New Roman', serif;
  --ds-font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-mono:  ui-monospace, 'SF Mono', Menlo, monospace;

  --ds-font-size-caption:  0.75rem;
  --ds-font-size-footnote: 0.8125rem;
  --ds-font-size-code:     0.8125rem;
  --ds-font-size-heading:  1.125rem;
  --ds-font-size-title:    1.375rem;
  --ds-font-size-display:  1.875rem;
  --ds-font-size-hero:     2.5rem;

  --ds-leading-tight: 1.15;
  --ds-leading-snug:  1.35;
  --ds-leading-body:  1.65;

  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-12: 3rem;

  --ds-radius-sm:   6px;
  --ds-radius:      8px;
  --ds-radius-card: 12px;
  --ds-radius-pill: 999px;

  --ds-dur-fast: 120ms;
  --ds-dur-base: 200ms;
  --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --ds-h-control: 40px;
  --ds-pad-control: 0 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ds-dur-fast: 0ms; --ds-dur-base: 0ms; }
}