/* ════════════════════════════════════════════════════════════════════
   FORGE DESIGN SYSTEM — v2.0
   Drop-in replacement for /css/design-system.css

   Changes from v1:
   - Light mode is now the default (was dark-only)
   - Dark mode activated via data-theme="dark" on the html element
   - Accent changed from Indigo #6366f1 → Forge Blue oklch(50% 0.175 255)
   - Font stack: added --font-heading (Source Serif 4) for h1–h4
   - --font-sans updated from Inter → Source Sans 3
   - All --radius-sm/radius/radius-lg/radius-xl set to 0px (sharp)
   - --radius-full: 9999px preserved (avatars, dots, pills)
   - Shadows lightened for light mode; heavier in dark mode
   - --color-error added as alias for --color-danger (fixes missing var)
   ════════════════════════════════════════════════════════════════════ */

/* ── LIGHT MODE — Parchment ─────────────────────────────────────── */
:root {
  /* Surfaces */
  --color-bg:         oklch(93.0% 0.018 85);   /* warm beige canvas         */
  --color-surface:    oklch(98.5% 0.006 85);   /* near-white cards, sidebar */
  --color-surface-2:  oklch(90.5% 0.022 83);   /* table heads, hover, inset */
  --color-surface-3:  oklch(87.0% 0.026 81);   /* deep inset, code, kbd     */
  --color-border:     oklch(86.0% 0.015 82);   /* default border            */
  --color-border-2:   oklch(78.0% 0.022 80);   /* emphasis, button outline  */

  /* Text */
  --color-text:       oklch(16.0% 0.020 82);   /* primary — warm near-black */
  --color-text-muted: oklch(46.0% 0.018 80);   /* labels, secondary info    */
  --color-text-dim:   oklch(66.0% 0.013 80);   /* placeholders, nav labels  */

  /* Accent — Forge Blue */
  --color-accent:       oklch(50.0% 0.175 255); /* primary CTA, active links */
  --color-accent-hover: oklch(44.0% 0.175 255); /* hover state               */
  --color-accent-muted: oklch(95.0% 0.055 255); /* active row bg, avatar bg  */
  --color-accent-text:  oklch(44.0% 0.175 255); /* text on accent-muted      */

  /* Semantic */
  --color-success:    oklch(50.0% 0.155 145);
  --color-success-bg: oklch(94.0% 0.055 145);
  --color-warning:    oklch(56.0% 0.165  72);
  --color-warning-bg: oklch(95.0% 0.060  72);
  --color-danger:     oklch(50.0% 0.210  22);
  --color-danger-bg:  oklch(95.0% 0.060  22);
  --color-error:      oklch(50.0% 0.210  22);  /* alias — same as --color-danger */
  --color-info:       oklch(52.0% 0.165 235);
  --color-info-bg:    oklch(95.0% 0.055 235);

  /* Typography */
  --font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:    'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, 'Courier New', monospace;

  /* Type scale — unchanged */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Spacing — 4px base grid, unchanged */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius — all sharp except --radius-full */
  --radius-sm:   0px;
  --radius:      0px;
  --radius-lg:   0px;
  --radius-xl:   0px;
  --radius-full: 9999px;  /* keep round: avatars, dots, pills, tags */

  /* Shadows — subtle for light mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.07);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.09);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.11);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.13);

  /* Z-index — unchanged */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 200;
  --z-sticky:   300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;

  /* Transitions — unchanged */
  --transition-fast: 100ms ease;
  --transition:      150ms ease;
  --transition-slow: 250ms ease;

  /* Layout — unchanged */
  --sidebar-width:     240px;
  --topbar-height:     56px;
  --content-max-width: 1280px;
}

/* ── DARK MODE — Espresso ───────────────────────────────────────── */
:root[data-theme="dark"] {
  /* Surfaces — warm dark brown (not gray, not blue) */
  --color-bg:         oklch(12.5% 0.030 58);   /* deep espresso             */
  --color-surface:    oklch(16.5% 0.032 56);
  --color-surface-2:  oklch(20.5% 0.034 54);
  --color-surface-3:  oklch(24.5% 0.036 52);
  --color-border:     oklch(28.0% 0.032 52);
  --color-border-2:   oklch(38.0% 0.040 50);

  /* Text */
  --color-text:       oklch(93.0% 0.010 82);   /* warm near-white           */
  --color-text-muted: oklch(63.0% 0.020 76);
  --color-text-dim:   oklch(42.0% 0.016 70);

  /* Accent — brighter for dark background */
  --color-accent:       oklch(60.0% 0.175 255);
  --color-accent-hover: oklch(66.0% 0.175 255);
  --color-accent-muted: oklch(20.0% 0.085 255);
  --color-accent-text:  oklch(75.0% 0.155 255);

  /* Semantic */
  --color-success:    oklch(62.0% 0.155 145);
  --color-success-bg: oklch(19.0% 0.070 145);
  --color-warning:    oklch(68.0% 0.165  72);
  --color-warning-bg: oklch(21.0% 0.080  72);
  --color-danger:     oklch(62.0% 0.210  22);
  --color-danger-bg:  oklch(19.0% 0.085  22);
  --color-error:      oklch(62.0% 0.210  22);
  --color-info:       oklch(62.0% 0.165 235);
  --color-info-bg:    oklch(20.0% 0.075 235);

  /* Shadows — heavier for dark mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.65);
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}