:root {
  --bg: #F5F4ED;
  --surface: #FAF9F5;
  --surface-raised: #FFFFFF;
  --ink: #141413;
  --ink-2: #6B6A63;
  --ink-3: #9C9B93;
  --line: #E8E6DC;
  --line-strong: #D4D2C8;

  --accent: #D97757;
  --accent-hover: #C6613F;
  --accent-subtle: rgba(217, 119, 87, 0.08);
  --accent-text: #B85636;

  --ok: #788C5D;
  --ok-subtle: rgba(120, 140, 93, 0.09);
  --ok-text: #5C6E45;
  --warn: #D4A24C;
  --warn-subtle: rgba(212, 162, 76, 0.10);
  --warn-text: #9E7330;
  --critical: #BF4D43;
  --critical-subtle: rgba(191, 77, 67, 0.08);
  --critical-text: #993D35;
  --info: #6A9BCC;
  --info-subtle: rgba(106, 155, 204, 0.09);
  --info-text: #4A7BA8;

  --terminal-bg: #1F1E1D;
  --terminal-fg: #E8E6DC;
  --terminal-accent: #D97757;

  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

  --fs-xs: 0.6875rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.375rem;
  --fs-4xl: 3rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --space-80: 5rem;

  --radius-xs: 6px;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(20, 20, 19, 0.03);
  --shadow-sm: 0 1px 4px rgba(20, 20, 19, 0.05);
  --shadow-md: 0 2px 12px rgba(20, 20, 19, 0.07);
  --shadow-lg: 0 8px 32px rgba(20, 20, 19, 0.10);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 120ms;
  --dur-normal: 200ms;
  --dur-slow: 280ms;

  --touch-min: 48px;
  --nav-height: 64px;
  --sync-bar-height: 32px;
  --header-height: 56px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"] {
  --bg: #1F1E1D;
  --surface: #262624;
  --surface-raised: #2E2D2B;
  --ink: #FAF9F5;
  --ink-2: #A8A69E;
  --ink-3: #7A7872;
  --line: #3A3936;
  --line-strong: #4A4845;

  --accent-subtle: rgba(217, 119, 87, 0.14);
  --accent-text: #E89A7E;
  --ok-subtle: rgba(120, 140, 93, 0.14);
  --ok-text: #9AB07D;
  --warn-subtle: rgba(212, 162, 76, 0.14);
  --warn-text: #E0B968;
  --critical-subtle: rgba(191, 77, 67, 0.12);
  --critical-text: #E07066;
  --info-subtle: rgba(106, 155, 204, 0.14);
  --info-text: #8BB5DA;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1F1E1D;
    --surface: #262624;
    --surface-raised: #2E2D2B;
    --ink: #FAF9F5;
    --ink-2: #A8A69E;
    --ink-3: #7A7872;
    --line: #3A3936;
    --line-strong: #4A4845;
    --accent-subtle: rgba(217, 119, 87, 0.14);
    --accent-text: #E89A7E;
    --ok-subtle: rgba(120, 140, 93, 0.14);
    --ok-text: #9AB07D;
    --warn-subtle: rgba(212, 162, 76, 0.14);
    --warn-text: #E0B968;
    --critical-subtle: rgba(191, 77, 67, 0.12);
    --critical-text: #E07066;
    --info-subtle: rgba(106, 155, 204, 0.14);
    --info-text: #8BB5DA;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
  }
}