/**
 * CODECURV DESIGN TOKENS
 * Concept: The Kinetic Drafting Laboratory (Light + Dark System)
 */

:root {
  /* ==========================================================================
     LIGHT THEME (Warm Bone Drafting Paper)
     ========================================================================== */
  --bg-canvas: #F7F6F2;
  --bg-canvas-subtle: #EFECE6;
  --bg-sheet: #FFFFFF;
  --bg-sheet-raised: #FAF9F6;
  --bg-carbon: #111215;
  --bg-carbon-surface: #181A1F;
  --bg-nav: rgba(247, 246, 242, 0.92);
  --bg-overlay: rgba(17, 18, 21, 0.6);

  /* Precision Rules */
  --rule-subtle: #E5E2DA;
  --rule-base: #DCD9D0;
  --rule-strong: #B8B3A8;
  --rule-dark: #2C303B;

  /* Typography Colors */
  --ink-primary: #111215;
  --ink-secondary: #4A4D57;
  --ink-muted: #7A7E8C;
  --ink-dim: #A4A8B5;
  --ink-inverted: #F7F6F2;
  --ink-inverted-muted: #9CA3AF;

  /* Functional Catalysts */
  --vermilion: #D9381E;
  --vermilion-tint: rgba(217, 56, 30, 0.08);
  --vermilion-glow: rgba(217, 56, 30, 0.35);
  --blueprint: #2C3E50;
  --signal-emerald: #108E61;
  --signal-amber: #D97706;

  /* Interactive Canvas Tokens */
  --canvas-cross: rgba(17, 18, 21, 0.15);
  --canvas-cross-active: #D9381E;
  --canvas-vector: rgba(217, 56, 30, 0.28);
  --canvas-text: rgba(17, 18, 21, 0.35);

  /* Typography Stacks */
  --font-serif: "Fraunces", "Instrument Serif", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

  /* Complete Spatial Rhythm Scale (No Missing Variables) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout Limits */
  --container-max: 1320px;
  --container-reading: 720px;
  --container-wide: 1440px;

  /* Radii */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-full: 9999px;

  /* Mechanical Easings */
  --ease-mechanical: cubic-bezier(0, 0, 0.2, 1);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-Index Hierarchy */
  --z-canvas: 1;
  --z-base: 2;
  --z-card: 3;
  --z-nav: 100;
  --z-drawer: 999;
  --z-cursor: 99999;
}

/* ==========================================================================
   DARK THEME (The Dark Drafting Studio)
   ========================================================================== */
[data-theme="dark"] {
  --bg-canvas: #0C0D11;
  --bg-canvas-subtle: #13151B;
  --bg-sheet: #181A22;
  --bg-sheet-raised: #1F222D;
  --bg-carbon: #07080A;
  --bg-carbon-surface: #101217;
  --bg-nav: rgba(12, 13, 17, 0.92);
  --bg-overlay: rgba(0, 0, 0, 0.75);

  --rule-subtle: #202430;
  --rule-base: #2D3344;
  --rule-strong: #4A536C;
  --rule-dark: #202430;

  --ink-primary: #F4F4F2;
  --ink-secondary: #A3A8B8;
  --ink-muted: #6B7285;
  --ink-dim: #454B5C;
  --ink-inverted: #F4F4F2;
  --ink-inverted-muted: #A3A8B8;

  --vermilion: #FF4D30;
  --vermilion-tint: rgba(255, 77, 48, 0.12);
  --vermilion-glow: rgba(255, 77, 48, 0.35);
  --signal-emerald: #22C55E;
  --signal-amber: #F59E0B;

  --canvas-cross: rgba(244, 244, 242, 0.18);
  --canvas-cross-active: #FF4D30;
  --canvas-vector: rgba(255, 77, 48, 0.35);
  --canvas-text: rgba(244, 244, 242, 0.45);
}

body,
header,
footer,
.spec-sheet-container,
.sorter-stage,
.workbench-terminal,
.doctrine-article-block,
.feature-spec-card,
.crosslink-card,
.solution-catalog-card,
.btn,
.mobile-nav-drawer {
  transition: background-color 240ms var(--ease-snap), 
              color 240ms var(--ease-snap), 
              border-color 240ms var(--ease-snap);
}