/* ============================================================================
   tokens.css — Single source of truth for design tokens
   W3C DTCG-style design system: primitives → semantic tokens
   Imported by both index.html and about.html.
   ============================================================================ */

/* ============================================================================
   DESIGN SYSTEM TOKENS - W3C DTCG COMPLIANT
   ============================================================================ */

:root {
  /* TIER 1: PRIMITIVES - COLOR NEUTRAL */
  --primitive-color-neutral-0: #ffffff;
  --primitive-color-neutral-50: #f8f8f6;
  --primitive-color-neutral-100: #f0f0ed;
  --primitive-color-neutral-200: #e8e8e5;
  --primitive-color-neutral-300: #d9d9d5;
  --primitive-color-neutral-400: #bfbfba;
  --primitive-color-neutral-500: #999994;
  --primitive-color-neutral-600: #666666;
  --primitive-color-neutral-700: #444444;
  --primitive-color-neutral-800: #2a2a2a;
  --primitive-color-neutral-900: #1a1a1a;
  --primitive-color-neutral-1000: #000000;

  /* TIER 1: PRIMITIVES - COLOR ACCENT */
  --primitive-color-accent-50: #fff4f0;
  --primitive-color-accent-100: #ffe8dc;
  --primitive-color-accent-200: #ffd4bf;
  --primitive-color-accent-300: #ffbd9f;
  --primitive-color-accent-400: #ffa57f;
  --primitive-color-accent-500: #ff6b47;
  --primitive-color-accent-600: #e55a3a;
  --primitive-color-accent-700: #cc4a2e;
  --primitive-color-accent-800: #b23a22;

  /* TIER 1: PRIMITIVES - COLOR STATUS */
  --primitive-color-success-50: #f0fdf4;
  --primitive-color-success-500: #22c55e;
  --primitive-color-success-600: #16a34a;
  --primitive-color-error-50: #fef2f2;
  --primitive-color-error-500: #ef4444;
  --primitive-color-error-600: #dc2626;
  --primitive-color-warning-50: #fefce8;
  --primitive-color-warning-500: #eab308;
  --primitive-color-warning-600: #ca8a04;

  /* TIER 1: PRIMITIVES - COLOR SEPIA (warm paper) */
  --primitive-color-sepia-0: #fcf8f0;
  --primitive-color-sepia-50: #f6edda;
  --primitive-color-sepia-100: #efe3c8;
  --primitive-color-sepia-200: #e4d4b0;
  --primitive-color-sepia-300: #d3bf93;
  --primitive-color-sepia-600: #8a7350;
  --primitive-color-sepia-700: #6b5739;
  --primitive-color-sepia-900: #3d3120;

  /* TIER 1: PRIMITIVES - COLOR SLATE (cool dim) */
  --primitive-color-slate-0: #f4f6f8;
  --primitive-color-slate-100: #d8dee6;
  --primitive-color-slate-300: #97a3b4;
  --primitive-color-slate-500: #5a6a7e;
  --primitive-color-slate-600: #3c4756;
  --primitive-color-slate-700: #313a47;
  --primitive-color-slate-800: #283039;
  --primitive-color-slate-850: #232a33;
  --primitive-color-slate-900: #1c222a;

  /* TIER 1: PRIMITIVES - SPACING */
  --primitive-spacing-0: 0px;
  --primitive-spacing-xs: 4px;
  --primitive-spacing-sm: 8px;
  --primitive-spacing-md: 16px;
  --primitive-spacing-lg: 24px;
  --primitive-spacing-xl: 32px;
  --primitive-spacing-2xl: 48px;
  --primitive-spacing-3xl: 64px;
  --primitive-spacing-4xl: 80px;

  /* TIER 1: PRIMITIVES - RADIUS */
  --primitive-radius-none: 0px;
  --primitive-radius-sm: 4px;
  --primitive-radius-md: 8px;
  --primitive-radius-lg: 12px;
  --primitive-radius-xl: 16px;
  --primitive-radius-full: 9999px;

  /* TYPOGRAPHY PRIMITIVES - FONT FAMILIES */
  --primitive-font-serif: 'EB Garamond', 'Georgia', serif;
  --primitive-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --primitive-font-mono: 'Monaco', 'Courier New', monospace;

  /* TYPOGRAPHY PRIMITIVES - FONT SIZES (Base 16px) */
  --primitive-font-size-xs: 12px;
  --primitive-font-size-sm: 14px;
  --primitive-font-size-base: 16px;
  --primitive-font-size-md: 18px;
  --primitive-font-size-lg: 20px;
  --primitive-font-size-xl-sm: 22px;
  --primitive-font-size-xl: 26px;
  --primitive-font-size-2xl: 30px;
  --primitive-font-size-3xl: 34px;
  --primitive-font-size-4xl-sm: 38px;
  --primitive-font-size-4xl: 44px;
  --primitive-font-size-5xl: 50px;
  --primitive-font-size-6xl: 58px;

  /* TYPOGRAPHY PRIMITIVES - FONT WEIGHTS */
  --primitive-font-weight-regular: 400;
  --primitive-font-weight-medium: 500;
  --primitive-font-weight-semibold: 600;
  --primitive-font-weight-bold: 700;
  --primitive-font-weight-extrabold: 800;

  /* TYPOGRAPHY PRIMITIVES - LINE HEIGHTS */
  --primitive-line-height-tight: 1.1;
  --primitive-line-height-snug: 1.25;
  --primitive-line-height-normal: 1.5;
  --primitive-line-height-relaxed: 1.6;
  --primitive-line-height-loose: 1.8;

  /* TYPOGRAPHY PRIMITIVES - LETTER SPACING */
  --primitive-letter-spacing-tight: -0.02em;
  --primitive-letter-spacing-normal: 0em;
  --primitive-letter-spacing-wide: 0.05em;
  --primitive-letter-spacing-wider: 0.1em;
  --primitive-letter-spacing-widest: 0.15em;

  /* ────────────────────────────────────────────────────────────────────────
     SEMANTIC: TYPOGRAPHY TOKENS - DISPLAY (Large Headlines)
     ──────────────────────────────────────────────────────────────────────── */
  --semantic-type-display-lg-font-family: var(--semantic-font-serif);
  --semantic-type-display-lg-font-size: var(--primitive-font-size-6xl);
  --semantic-type-display-lg-font-weight: var(--primitive-font-weight-bold);
  --semantic-type-display-lg-line-height: var(--primitive-line-height-tight);
  --semantic-type-display-lg-letter-spacing: var(--primitive-letter-spacing-tight);

  --semantic-type-display-md-font-family: var(--semantic-font-serif);
  --semantic-type-display-md-font-size: var(--primitive-font-size-5xl);
  --semantic-type-display-md-font-weight: var(--primitive-font-weight-bold);
  --semantic-type-display-md-line-height: 1.15;
  --semantic-type-display-md-letter-spacing: -0.01em;

  --semantic-type-display-sm-font-family: var(--semantic-font-serif);
  --semantic-type-display-sm-font-size: var(--primitive-font-size-4xl);
  --semantic-type-display-sm-font-weight: var(--primitive-font-weight-bold);
  --semantic-type-display-sm-line-height: 1.2;
  --semantic-type-display-sm-letter-spacing: -0.01em;

  /* ────────────────────────────────────────────────────────────────────────
     SEMANTIC: TYPOGRAPHY TOKENS - HEADING (Section Titles)
     ──────────────────────────────────────────────────────────────────────── */
  --semantic-type-heading-lg-font-family: var(--semantic-font-serif);
  --semantic-type-heading-lg-font-size: var(--primitive-font-size-4xl-sm);
  --semantic-type-heading-lg-font-weight: var(--primitive-font-weight-bold);
  --semantic-type-heading-lg-line-height: var(--primitive-line-height-snug);
  --semantic-type-heading-lg-letter-spacing: -0.01em;

  --semantic-type-heading-md-font-family: var(--semantic-font-serif);
  --semantic-type-heading-md-font-size: var(--primitive-font-size-2xl);
  --semantic-type-heading-md-font-weight: var(--primitive-font-weight-bold);
  --semantic-type-heading-md-line-height: 1.3;
  --semantic-type-heading-md-letter-spacing: -0.01em;

  --semantic-type-heading-sm-font-family: var(--semantic-font-serif);
  --semantic-type-heading-sm-font-size: var(--primitive-font-size-xl);
  --semantic-type-heading-sm-font-weight: var(--primitive-font-weight-bold);
  --semantic-type-heading-sm-line-height: 1.35;
  --semantic-type-heading-sm-letter-spacing: -0.01em;

  --semantic-type-heading-xs-font-family: var(--semantic-font-serif);
  --semantic-type-heading-xs-font-size: var(--primitive-font-size-xl-sm);
  --semantic-type-heading-xs-font-weight: var(--primitive-font-weight-bold);
  --semantic-type-heading-xs-line-height: 1.4;
  --semantic-type-heading-xs-letter-spacing: -0.01em;

  --semantic-type-heading-2xs-font-family: var(--semantic-font-serif);
  --semantic-type-heading-2xs-font-size: var(--primitive-font-size-lg);
  --semantic-type-heading-2xs-font-weight: var(--primitive-font-weight-bold);
  --semantic-type-heading-2xs-line-height: 1.4;
  --semantic-type-heading-2xs-letter-spacing: -0.01em;

  /* ────────────────────────────────────────────────────────────────────────
     SEMANTIC: TYPOGRAPHY TOKENS - BODY (Regular Text)
     ──────────────────────────────────────────────────────────────────────── */
  --semantic-type-body-lg-font-family: var(--semantic-font-sans);
  --semantic-type-body-lg-font-size: var(--primitive-font-size-md);
  --semantic-type-body-lg-font-weight: var(--primitive-font-weight-regular);
  --semantic-type-body-lg-line-height: 1.65;
  --semantic-type-body-lg-letter-spacing: var(--primitive-letter-spacing-normal);

  --semantic-type-body-md-font-family: var(--semantic-font-sans);
  --semantic-type-body-md-font-size: var(--primitive-font-size-base);
  --semantic-type-body-md-font-weight: var(--primitive-font-weight-regular);
  --semantic-type-body-md-line-height: 1.65;
  --semantic-type-body-md-letter-spacing: var(--primitive-letter-spacing-normal);

  --semantic-type-body-sm-font-family: var(--semantic-font-sans);
  --semantic-type-body-sm-font-size: var(--primitive-font-size-sm);
  --semantic-type-body-sm-font-weight: var(--primitive-font-weight-regular);
  --semantic-type-body-sm-line-height: var(--primitive-line-height-relaxed);
  --semantic-type-body-sm-letter-spacing: var(--primitive-letter-spacing-normal);

  /* ────────────────────────────────────────────────────────────────────────
     SEMANTIC: TYPOGRAPHY TOKENS - BODY STRONG (Emphasized Text)
     ──────────────────────────────────────────────────────────────────────── */
  --semantic-type-body-strong-lg-font-family: var(--semantic-font-sans);
  --semantic-type-body-strong-lg-font-size: var(--primitive-font-size-md);
  --semantic-type-body-strong-lg-font-weight: var(--primitive-font-weight-semibold);
  --semantic-type-body-strong-lg-line-height: 1.65;
  --semantic-type-body-strong-lg-letter-spacing: var(--primitive-letter-spacing-normal);

  --semantic-type-body-strong-md-font-family: var(--semantic-font-sans);
  --semantic-type-body-strong-md-font-size: var(--primitive-font-size-base);
  --semantic-type-body-strong-md-font-weight: var(--primitive-font-weight-semibold);
  --semantic-type-body-strong-md-line-height: 1.65;
  --semantic-type-body-strong-md-letter-spacing: var(--primitive-letter-spacing-normal);

  --semantic-type-body-strong-sm-font-family: var(--semantic-font-sans);
  --semantic-type-body-strong-sm-font-size: var(--primitive-font-size-sm);
  --semantic-type-body-strong-sm-font-weight: var(--primitive-font-weight-semibold);
  --semantic-type-body-strong-sm-line-height: var(--primitive-line-height-relaxed);
  --semantic-type-body-strong-sm-letter-spacing: var(--primitive-letter-spacing-normal);

  /* ────────────────────────────────────────────────────────────────────────
     SEMANTIC: TYPOGRAPHY TOKENS - LABEL (Form Labels, Small Text)
     ──────────────────────────────────────────────────────────────────────── */
  --semantic-type-label-lg-font-family: var(--semantic-font-sans);
  --semantic-type-label-lg-font-size: var(--primitive-font-size-base);
  --semantic-type-label-lg-font-weight: var(--primitive-font-weight-medium);
  --semantic-type-label-lg-line-height: var(--primitive-line-height-normal);
  --semantic-type-label-lg-letter-spacing: 0.02em;

  --semantic-type-label-md-font-family: var(--semantic-font-sans);
  --semantic-type-label-md-font-size: var(--primitive-font-size-sm);
  --semantic-type-label-md-font-weight: var(--primitive-font-weight-medium);
  --semantic-type-label-md-line-height: var(--primitive-line-height-normal);
  --semantic-type-label-md-letter-spacing: 0.02em;

  --semantic-type-label-sm-font-family: var(--semantic-font-sans);
  --semantic-type-label-sm-font-size: var(--primitive-font-size-xs);
  --semantic-type-label-sm-font-weight: var(--primitive-font-weight-medium);
  --semantic-type-label-sm-line-height: 1.4;
  --semantic-type-label-sm-letter-spacing: var(--primitive-letter-spacing-wide);

  /* ────────────────────────────────────────────────────────────────────────
     SEMANTIC: TYPOGRAPHY TOKENS - CODE (Monospace for Code)
     ──────────────────────────────────────────────────────────────────────── */
  --semantic-type-code-lg-font-family: 'Monaco', 'Courier New', monospace;
  --semantic-type-code-lg-font-size: var(--primitive-font-size-base);
  --semantic-type-code-lg-font-weight: var(--primitive-font-weight-regular);
  --semantic-type-code-lg-line-height: var(--primitive-line-height-relaxed);
  --semantic-type-code-lg-letter-spacing: var(--primitive-letter-spacing-normal);

  --semantic-type-code-md-font-family: 'Monaco', 'Courier New', monospace;
  --semantic-type-code-md-font-size: var(--primitive-font-size-sm);
  --semantic-type-code-md-font-weight: var(--primitive-font-weight-regular);
  --semantic-type-code-md-line-height: var(--primitive-line-height-relaxed);
  --semantic-type-code-md-letter-spacing: var(--primitive-letter-spacing-normal);

  --semantic-type-code-sm-font-family: 'Monaco', 'Courier New', monospace;
  --semantic-type-code-sm-font-size: var(--primitive-font-size-xs);
  --semantic-type-code-sm-font-weight: var(--primitive-font-weight-regular);
  --semantic-type-code-sm-line-height: var(--primitive-line-height-normal);
  --semantic-type-code-sm-letter-spacing: var(--primitive-letter-spacing-normal);

  /* ────────────────────────────────────────────────────────────────────────
     SEMANTIC: TYPOGRAPHY TOKENS - CAPTION (Small Descriptive Text)
     ──────────────────────────────────────────────────────────────────────── */
  --semantic-type-caption-lg-font-family: var(--semantic-font-sans);
  --semantic-type-caption-lg-font-size: var(--primitive-font-size-base);
  --semantic-type-caption-lg-font-weight: var(--primitive-font-weight-regular);
  --semantic-type-caption-lg-line-height: var(--primitive-line-height-normal);
  --semantic-type-caption-lg-letter-spacing: var(--primitive-letter-spacing-normal);

  --semantic-type-caption-md-font-family: var(--semantic-font-sans);
  --semantic-type-caption-md-font-size: var(--primitive-font-size-sm);
  --semantic-type-caption-md-font-weight: var(--primitive-font-weight-regular);
  --semantic-type-caption-md-line-height: var(--primitive-line-height-normal);
  --semantic-type-caption-md-letter-spacing: var(--primitive-letter-spacing-normal);

  --semantic-type-caption-sm-font-family: var(--semantic-font-sans);
  --semantic-type-caption-sm-font-size: var(--primitive-font-size-xs);
  --semantic-type-caption-sm-font-weight: var(--primitive-font-weight-regular);
  --semantic-type-caption-sm-line-height: 1.4;
  --semantic-type-caption-sm-letter-spacing: var(--primitive-letter-spacing-normal);

  /* ────────────────────────────────────────────────────────────────────────
     SEMANTIC: TYPOGRAPHY TOKENS - ARTICLE (long-form reading scale)
     Use for: case-study / article pages. Body is 20px desktop, scales down
     to 18px below the responsive breakpoint (see media query at file end).
     Other article sizes (small, summary, quote, heading, title) scale in
     step so the visual rhythm holds at both viewports.
     ──────────────────────────────────────────────────────────────────────── */
  --semantic-type-article-small-font-family: var(--semantic-font-sans);
  --semantic-type-article-small-font-size: var(--primitive-font-size-base);    /* 16px */
  --semantic-type-article-small-line-height: var(--primitive-line-height-normal);

  --semantic-type-article-body-font-family: var(--semantic-font-sans);
  --semantic-type-article-body-font-size: var(--primitive-font-size-lg);       /* 20px */
  --semantic-type-article-body-line-height: var(--primitive-line-height-relaxed);

  --semantic-type-article-summary-font-family: var(--semantic-font-sans);
  --semantic-type-article-summary-font-size: var(--primitive-font-size-lg);    /* 26px */
  --semantic-type-article-summary-line-height: var(--primitive-line-height-normal);

  --semantic-type-article-quote-font-family: var(--semantic-font-serif);
  --semantic-type-article-quote-font-size: var(--primitive-font-size-xl);      /* 26px */
  --semantic-type-article-quote-line-height: var(--primitive-line-height-snug);

  --semantic-type-article-heading-font-family: var(--semantic-font-serif);
  --semantic-type-article-heading-font-size: var(--primitive-font-size-2xl);   /* 30px */
  --semantic-type-article-heading-font-weight: var(--primitive-font-weight-bold);
  --semantic-type-article-heading-line-height: var(--primitive-line-height-snug);
  --semantic-type-article-heading-letter-spacing: var(--primitive-letter-spacing-tight);

  --semantic-type-article-title-font-family: var(--semantic-font-serif);
  --semantic-type-article-title-font-size: var(--primitive-font-size-5xl);     /* 44px */
  --semantic-type-article-title-font-weight: var(--primitive-font-weight-bold);
  --semantic-type-article-title-line-height: var(--primitive-line-height-snug);
  --semantic-type-article-title-letter-spacing: var(--primitive-letter-spacing-tight);

  /* ────────────────────────────────────────────────────────────────────────
     SEMANTIC: TYPOGRAPHY TOKENS - EYEBROW (Small Uppercase Section Labels)
     Use for: section numbers (01, 02), section labels (WHAT I DO),
     eyebrow text above hero, category markers.
     ──────────────────────────────────────────────────────────────────────── */
  --semantic-type-eyebrow-lg-font-family: var(--semantic-font-sans);
  --semantic-type-eyebrow-lg-font-size: var(--primitive-font-size-base);
  --semantic-type-eyebrow-lg-font-weight: var(--primitive-font-weight-semibold);
  --semantic-type-eyebrow-lg-line-height: var(--primitive-line-height-normal);
  --semantic-type-eyebrow-lg-letter-spacing: var(--primitive-letter-spacing-wide);
  --semantic-type-eyebrow-lg-text-transform: uppercase;

  --semantic-type-eyebrow-md-font-family: var(--semantic-font-sans);
  --semantic-type-eyebrow-md-font-size: var(--primitive-font-size-sm);
  --semantic-type-eyebrow-md-font-weight: var(--primitive-font-weight-semibold);
  --semantic-type-eyebrow-md-line-height: var(--primitive-line-height-normal);
  --semantic-type-eyebrow-md-letter-spacing: var(--primitive-letter-spacing-wide);
  --semantic-type-eyebrow-md-text-transform: uppercase;

  --semantic-type-eyebrow-sm-font-family: var(--semantic-font-sans);
  --semantic-type-eyebrow-sm-font-size: var(--primitive-font-size-xs);
  --semantic-type-eyebrow-sm-font-weight: var(--primitive-font-weight-medium);
  --semantic-type-eyebrow-sm-line-height: var(--primitive-line-height-normal);
  --semantic-type-eyebrow-sm-letter-spacing: var(--primitive-letter-spacing-wider);
  --semantic-type-eyebrow-sm-text-transform: uppercase;

  /* TIER 1: PRIMITIVES - SHADOWS */
  --primitive-shadow-none: 0px 0px 0px rgba(0, 0, 0, 0);
  --primitive-shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.05);
  --primitive-shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.1);
  --primitive-shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.1);
  --primitive-shadow-lg: 0px 10px 15px rgba(0, 0, 0, 0.1);
  --primitive-shadow-xl: 0px 20px 25px rgba(0, 0, 0, 0.1);

  /* TIER 2: SEMANTIC TOKENS - LIGHT MODE */
  --semantic-color-background-primary: var(--primitive-color-neutral-50);
  --semantic-color-background-secondary: var(--primitive-color-neutral-100);
  --semantic-color-background-tertiary: var(--primitive-color-neutral-200);
  --semantic-color-background-article: var(--primitive-color-neutral-0);  /* pure-white reading surface for long-form article pages */
  --semantic-color-text-primary: var(--primitive-color-neutral-900);
  --semantic-color-text-secondary: var(--primitive-color-neutral-600);
  --semantic-color-text-tertiary: var(--primitive-color-neutral-500);
  --semantic-color-text-inverse: var(--primitive-color-neutral-0);
  --semantic-color-border-primary: var(--primitive-color-neutral-200);
  --semantic-color-border-secondary: var(--primitive-color-neutral-100);
  --semantic-color-border-strong: var(--primitive-color-neutral-400);
  --semantic-color-interactive-primary: var(--primitive-color-accent-500);
  --semantic-color-interactive-primary-hover: var(--primitive-color-accent-600);
  --semantic-color-interactive-primary-active: var(--primitive-color-accent-700);
  --semantic-color-interactive-primary-disabled: var(--primitive-color-neutral-300);
  --semantic-color-status-success: var(--primitive-color-success-500);
  --semantic-color-status-error: var(--primitive-color-error-500);
  --semantic-color-status-warning: var(--primitive-color-warning-500);

  --semantic-spacing-xs: var(--primitive-spacing-xs);
  --semantic-spacing-sm: var(--primitive-spacing-sm);
  --semantic-spacing-md: var(--primitive-spacing-md);
  --semantic-spacing-lg: var(--primitive-spacing-lg);
  --semantic-spacing-xl: var(--primitive-spacing-xl);
  --semantic-spacing-2xl: var(--primitive-spacing-2xl);
  --semantic-spacing-3xl: var(--primitive-spacing-3xl);
  --semantic-spacing-4xl: var(--primitive-spacing-4xl);

  --semantic-radius-none: var(--primitive-radius-none);
  --semantic-radius-sm: var(--primitive-radius-sm);
  --semantic-radius-md: var(--primitive-radius-md);
  --semantic-radius-lg: var(--primitive-radius-lg);
  --semantic-radius-full: var(--primitive-radius-full);

  --semantic-shadow-none: var(--primitive-shadow-none);
  --semantic-shadow-sm: var(--primitive-shadow-sm);
  --semantic-shadow-md: var(--primitive-shadow-md);
  --semantic-shadow-lg: var(--primitive-shadow-lg);

  --semantic-font-serif: var(--primitive-font-serif);
  --semantic-font-sans: var(--primitive-font-sans);
  --semantic-font-mono: var(--primitive-font-mono);

  /* LAYOUT - Container max-widths
     Named variants for content container widths. Use modifier classes
     (.container, .container--narrow) rather than ad-hoc overrides. */
  --semantic-layout-container-max-width-default: 1200px;
  --semantic-layout-container-max-width-narrow: 1000px;
  --semantic-layout-container-max-width-reading: 672px;  /* optimal line length for long-form article/prose */
}

/* DARK MODE */
@media (prefers-color-scheme: dark) {
  :root {
    --semantic-color-background-primary: var(--primitive-color-neutral-900);
    --semantic-color-background-secondary: var(--primitive-color-neutral-800);
    --semantic-color-background-tertiary: var(--primitive-color-neutral-700);
    --semantic-color-background-article: var(--primitive-color-neutral-900);  /* dark reading surface keeps article text legible in dark mode */
    --semantic-color-text-primary: var(--primitive-color-neutral-0);
    --semantic-color-text-secondary: var(--primitive-color-neutral-300);
    --semantic-color-text-tertiary: var(--primitive-color-neutral-500);
    --semantic-color-text-inverse: var(--primitive-color-neutral-900);
    --semantic-color-border-primary: var(--primitive-color-neutral-700);
    --semantic-color-border-secondary: var(--primitive-color-neutral-800);
    --semantic-color-border-strong: var(--primitive-color-neutral-500);
    --semantic-color-interactive-primary: var(--primitive-color-accent-400);
    --semantic-color-interactive-primary-hover: var(--primitive-color-accent-300);
    --semantic-color-interactive-primary-active: var(--primitive-color-accent-200);
    --semantic-color-interactive-primary-disabled: var(--primitive-color-neutral-600);
    --semantic-shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.3);
    --semantic-shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.4);
    --semantic-shadow-lg: 0px 10px 15px rgba(0, 0, 0, 0.5);
  }
}

[data-theme='dark'] {
  --semantic-color-background-primary: var(--primitive-color-neutral-900);
  --semantic-color-background-secondary: var(--primitive-color-neutral-800);
  --semantic-color-background-tertiary: var(--primitive-color-neutral-700);
  --semantic-color-background-article: var(--primitive-color-neutral-900);  /* dark reading surface keeps article text legible in dark mode */
  --semantic-color-text-primary: var(--primitive-color-neutral-0);
  --semantic-color-text-secondary: var(--primitive-color-neutral-300);
  --semantic-color-text-tertiary: var(--primitive-color-neutral-500);
  --semantic-color-text-inverse: var(--primitive-color-neutral-900);
  --semantic-color-border-primary: var(--primitive-color-neutral-700);
  --semantic-color-border-secondary: var(--primitive-color-neutral-800);
  --semantic-color-border-strong: var(--primitive-color-neutral-500);
  --semantic-color-interactive-primary: var(--primitive-color-accent-400);
  --semantic-color-interactive-primary-hover: var(--primitive-color-accent-300);
  --semantic-color-interactive-primary-active: var(--primitive-color-accent-200);
  --semantic-color-interactive-primary-disabled: var(--primitive-color-neutral-600);
  --semantic-shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.3);
  --semantic-shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.4);
  --semantic-shadow-lg: 0px 10px 15px rgba(0, 0, 0, 0.5);
}

/* SEPIA THEME (warm paper / reading) */
[data-theme='sepia'] {
  --semantic-color-background-primary: var(--primitive-color-sepia-50);
  --semantic-color-background-secondary: var(--primitive-color-sepia-100);
  --semantic-color-background-tertiary: var(--primitive-color-sepia-200);
  --semantic-color-background-article: var(--primitive-color-sepia-0);
  --semantic-color-text-primary: var(--primitive-color-sepia-900);
  --semantic-color-text-secondary: var(--primitive-color-sepia-700);
  --semantic-color-text-tertiary: var(--primitive-color-sepia-600);
  --semantic-color-text-inverse: var(--primitive-color-sepia-0);
  --semantic-color-border-primary: var(--primitive-color-sepia-200);
  --semantic-color-border-secondary: var(--primitive-color-sepia-100);
  --semantic-color-border-strong: var(--primitive-color-sepia-300);
  --semantic-color-interactive-primary: var(--primitive-color-accent-600);
  --semantic-color-interactive-primary-hover: var(--primitive-color-accent-700);
  --semantic-color-interactive-primary-active: var(--primitive-color-accent-800);
  --semantic-color-interactive-primary-disabled: var(--primitive-color-sepia-300);
}

/* SLATE THEME (cool dim) */
[data-theme='slate'] {
  --semantic-color-background-primary: var(--primitive-color-slate-850);
  --semantic-color-background-secondary: var(--primitive-color-slate-800);
  --semantic-color-background-tertiary: var(--primitive-color-slate-700);
  --semantic-color-background-article: var(--primitive-color-slate-900);
  --semantic-color-text-primary: var(--primitive-color-slate-0);
  --semantic-color-text-secondary: var(--primitive-color-slate-100);
  --semantic-color-text-tertiary: var(--primitive-color-slate-300);
  --semantic-color-text-inverse: var(--primitive-color-slate-900);
  --semantic-color-border-primary: var(--primitive-color-slate-700);
  --semantic-color-border-secondary: var(--primitive-color-slate-800);
  --semantic-color-border-strong: var(--primitive-color-slate-500);
  --semantic-color-interactive-primary: var(--primitive-color-accent-400);
  --semantic-color-interactive-primary-hover: var(--primitive-color-accent-300);
  --semantic-color-interactive-primary-active: var(--primitive-color-accent-200);
  --semantic-color-interactive-primary-disabled: var(--primitive-color-slate-600);
  --semantic-shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.3);
  --semantic-shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.4);
  --semantic-shadow-lg: 0px 10px 15px rgba(0, 0, 0, 0.5);
}

/* ARTICLE TYPE SCALE - mobile (≤968px)
   Reduces the article reading sizes one step down the primitive ladder
   so the rhythm holds on small viewports. Only article tokens shift;
   the rest of the site keeps its existing responsive behavior. */
@media (max-width: 968px) {
  :root {
    --semantic-type-article-small-font-size: var(--primitive-font-size-sm);     /* 14px */
    --semantic-type-article-body-font-size: var(--primitive-font-size-md);      /* 18px */
    --semantic-type-article-summary-font-size: var(--primitive-font-size-md);/* 22px */
    --semantic-type-article-quote-font-size: var(--primitive-font-size-xl-sm);  /* 22px */
    --semantic-type-article-heading-font-size: var(--primitive-font-size-xl);   /* 26px */
    --semantic-type-article-title-font-size: var(--primitive-font-size-4xl-sm); /* 38px */
  }
}