:root {
  /* ==========================================================================
     STORMGRADE DESIGN SYSTEM TOKENS (Hallmark · Refactoring UI · Emil Kowalski)
     ========================================================================== */

  /* Spacing Scale (4px / 8px Harmonized Base) */
  /* Typography Scale & Font Stacks */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-display: var(--font-serif);
  --font-body: var(--font-sans);
  --font-pixel: "Geist Pixel Circle", monospace;

  /* Canvas & Surface Tokens (Tinted Neutrals, Chroma > 0.005) */
  --color-canvas-dark: #070b0c;
  --color-surface-dark: #0f1517;
  --color-card-dark: #141c1f;
  --color-pill-dark: #28282a;
  --color-sign-in-dark: #2e2e30;
  --color-overlay-dark: rgba(7, 11, 12, 0.65);
  --color-overlay-dim: rgba(7, 11, 12, 0.45);
  --color-overlay-soft: rgba(7, 11, 12, 0.28);
  --color-overlay-subtle: rgba(7, 11, 12, 0.08);
  --color-overlay-minimal: rgba(7, 11, 12, 0.04);
  --color-overlay-card: rgba(7, 11, 12, 0.35);

  /* Warm Paper Canvas (Section 2 & 3 Continuous Ground) */
  --color-paper: #f1f1ee;
  --color-paper-subtle: #eaeae6;
  --color-paper-card: #f8f8f5;
  --color-paper-border: rgba(12, 16, 18, 0.08);
  --color-paper-border-hover: rgba(12, 16, 18, 0.18);
  --color-paper-smoke-1: rgba(245, 245, 242, 0.55);
  --color-paper-smoke-2: rgba(241, 241, 238, 0.28);
  --color-paper-smoke-3: rgba(245, 245, 242, 0.45);
  --color-paper-fog-1: rgba(241, 241, 238, 0.20);
  --color-paper-fog-2: rgba(241, 241, 238, 0.05);
  --color-paper-mask-solid: rgb(241 241 238 / .96);
  --color-paper-mask-dense: rgb(241 241 238 / .8);
  --color-paper-mask-mid: rgb(241 241 238 / .72);

  /* Mountain Atmospheric Haze Tokens */
  --color-mountain-haze-cool: rgba(188, 202, 206, 0.48);
  --color-mountain-haze-light: rgba(218, 225, 222, 0.75);
  --color-mountain-haze-warm: rgba(241, 241, 238, 0.62);
  --color-mountain-haze-radial-left: rgba(210, 222, 220, 0.75);
  --color-mountain-haze-radial-right: rgba(205, 218, 216, 0.65);

  /* Light Surfaces (Softened Off-White, Never Harsh 255/255/255) */
  --color-surface-white: #fcfdfd;
  --color-surface-white-translucent: rgba(252, 253, 253, 0.94);
  --color-surface-white-soft: rgba(252, 253, 253, 0.70);
  --color-surface-white-ghost: rgba(252, 253, 253, 0.25);
  --color-surface-white-shadow: rgba(252, 253, 253, 0.6);

  /* Typography & Text Tokens */
  --color-text-white: #fcfdfd;
  --color-text-light: #fcfcfc;
  --color-text-light-secondary: #d0d5d8;
  --color-text-hero-muted: #a1a1aa;
  --color-text-light-muted: #8e989e;
  --color-text-sign-in: #c8c8c8;
  --color-text-trust: #c4c2c3;
  --color-text-dark: #09090b;
  --color-text-dark-pure: #0c1012;
  --color-text-dark-secondary: #52525b;
  --color-text-dark-muted: #71717a;
  --color-text-dark-subtle: #3f3f46;
  --color-text-hover-dark: #18181b;
  --color-text-dark-body: #6f6f6c;
  --color-text-footer-muted: #9c9c98;

  /* Brand Signature Teal */
  --color-brand-teal: #008f85;
  --color-brand-teal-bright: #00a99d;
  --color-brand-teal-light: #f0fdfa;
  --color-brand-teal-border: #99f6e4;
  --color-brand-teal-deep: #0f766e;
  --color-brand-teal-dark: #005c56;
  --color-brand-teal-subtle: rgba(0, 143, 133, 0.12);
  --color-brand-teal-glow-1: rgba(0, 169, 157, 0.35);
  --color-brand-teal-glow-2: rgba(0, 169, 157, 0.18);
  --color-brand-teal-glow-hover-1: rgba(0, 169, 157, 0.55);
  --color-brand-teal-glow-hover-2: rgba(0, 169, 157, 0.30);

  /* Status Tokens: Amber */
  --color-amber: #b45309;
  --color-amber-bg: #fffbeb;
  --color-amber-border: #fde68a;
  --color-amber-bright: #f59e0b;

  /* Status Tokens: Green */
  --color-green: #15803d;
  --color-green-light: #16a34a;
  --color-green-dark: #14532d;
  --color-green-deep: #166534;
  --color-green-bg: #f0fdf4;
  --color-green-pill: #bbf7d0;
  --color-green-accent: #22c55e;
  --color-green-banner-bg: #dcfce7;
  --color-emerald: #10b981;
  --color-emerald-glow: rgba(16, 185, 129, 0.25);

  /* Status Tokens: Purple */
  --color-purple: #7e22ce;
  --color-purple-bg: #faf5ff;
  --color-purple-border: #e9d5ff;
  --color-purple-bright: #a855f7;

  /* Focus & Interactive Borders */
  --color-focus: #008f85;
  --color-border-dark: rgba(252, 253, 253, 0.15);
  --color-border-dark-hover: rgba(252, 253, 253, 0.25);
  --color-border-trust: rgba(252, 253, 253, 0.40);
  --color-border-card-hairline: rgba(12, 16, 18, 0.06);
  --color-border-light-gray: #e4e4e7;
  --color-border-lighter: #f4f4f5;
  --color-border-chip: rgba(12, 16, 18, 0.12);
  --color-bg-chip: rgba(252, 253, 253, 0.65);
  --color-bg-card-light: #fafafa;
  --color-bg-avatar: #e3e3e0;

  /* Shadows (Neutral Depth with Y-Offset) */
  --shadow-sm: 0 1px 2px rgba(12, 16, 18, 0.05);
  --shadow-card: 0 4px 16px rgba(12, 16, 18, 0.06), 0 1px 2px rgba(12, 16, 18, 0.04);
  --shadow-tab-active: 0 1px 3px rgba(12, 16, 18, 0.08), 0 1px 2px rgba(12, 16, 18, 0.04);
  --shadow-btn-dark: 0 2px 6px rgba(12, 16, 18, 0.15);
  --shadow-dropdown: 0 10px 28px rgba(12, 16, 18, 0.12), 0 2px 6px rgba(12, 16, 18, 0.06);
  --shadow-modal: 0 24px 64px rgba(12, 16, 18, 0.20), 0 4px 12px rgba(12, 16, 18, 0.08);
  --shadow-toast: 0 12px 36px rgba(7, 11, 12, 0.45), 0 0 0 1px rgba(252, 253, 253, 0.15);
  --shadow-wordmark-bottom: 0 2px 6px rgba(7, 11, 12, 0.2);

  /* Physics Transitions & Durations (Emil Kowalski Spec) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-normal: 240ms;
}