/**
 * RENALYTICA MASTER DESIGN TOKENS
 * Specification: design.md & User Direction (60-30-10 Color Hierarchy)
 * 60% Pure White (#FFFFFF) Canvas
 * 30% Momentum Orange (#FF8000) Secondary Energy
 * Stark Black (#0A0A0A) Authority & Contrast Accent
 * Slate Grey (#586472 / #F4F4F5) Scaffolding & Borders
 */

:root {
  /* ==========================================================================
     1. CHROMATIC MATRIX (60-30-10 HIERARCHY)
     ========================================================================== */

  /* Primary Canvas: 60% Visual Ground (Clarity & Precision) */
  --canvas-primary: #FFFFFF;
  --canvas-surface: #FFFFFF;
  --surface-tint: #FAFAFA;
  --surface-gray: #F4F4F5;
  --surface-card: #FFFFFF;
  --border-light: #E4E4E7;
  --border-subtle: #F4F4F5;
  --border-strong: #D4D4D8;
  
  --text-primary: #0A0A0A;
  --text-secondary: #52525B;
  --text-tertiary: #71717A;
  --text-muted: #A1A1AA;

  /* Secondary Energy: 30% Momentum Orange (Action, Identity, Energy) */
  --accent-momentum: #FF8000;              /* Brand Approved Secondary Orange */
  --accent-momentum-vibrant: #FF5C00;      /* Signal Action */
  --accent-momentum-hover: #EA7300;
  --accent-momentum-glow: rgba(255, 128, 0, 0.28);
  --accent-momentum-subtle: rgba(255, 128, 0, 0.08);
  --accent-momentum-border: rgba(255, 128, 0, 0.25);

  /* Authority & Contrast Accent: Stark / Obsidian Black */
  --color-black: #0A0A0A;
  --canvas-dark: #0B0F17;
  --canvas-dark-card: #151D2A;
  --border-dark: rgba(255, 255, 255, 0.12);
  --text-dark-primary: #F8FAFC;
  --text-dark-secondary: #94A3B8;

  /* Scaffolding: Slate Grey (Least Visual Volume) */
  --scaffold-slate: #586472;
  --scaffold-slate-rgb: 88, 100, 114;
  --scaffold-gray: #F4F4F5;

  /* Signals */
  --signal-success: #16A34A;
  --signal-warning: #D97706;
  --signal-error: #DC2626;
  --signal-info: #0284C7;

  /* Active Theme Defaults: Pure White Primary */
  --canvas: var(--canvas-primary);
  --surface: var(--canvas-surface);
  --border: var(--border-light);
  --text-ghost: var(--scaffold-slate);
}

/* ==========================================================================
   DARK THEME OVERRIDES (System-Wide Color Inversion)
   ========================================================================== */
[data-theme="dark"] {
  --canvas-primary: #090D16;
  --canvas-surface: #0E1422;
  --surface-tint: #131B2C;
  --surface-gray: #162035;
  --surface-card: #101828;
  --border-light: rgba(255, 255, 255, 0.10);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.18);

  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-tertiary: #94A3B8;
  --text-muted: #64748B;

  --color-black: #0A0A0A;
  --scaffold-gray: #162035;
  
  --canvas: var(--canvas-primary);
  --surface: var(--canvas-surface);
  --border: var(--border-light);
  --text-ghost: #94A3B8;

  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 18px 45px rgba(255, 128, 0, 0.22);
}

/* ==========================================================================
   2. TYPOGRAPHY TOKENS
   ========================================================================== */
:root {
  --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Fluid Modular Scale */
  --text-micro: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 42px;
  --text-4xl: 56px;
  --text-mega: clamp(40px, 5vw, 84px);
  --text-watermark: clamp(80px, 12vw, 180px);

  /* Tracking */
  --tracking-tightest: -0.035em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;
  --tracking-telemetry: 0.16em;

  /* Line Heights */
  --leading-display: 1.02;
  --leading-headline: 1.15;
  --leading-snug: 1.30;
  --leading-body: 1.65;

  /* ==========================================================================
     3. SPATIAL & LAYOUT TOKENS
     ========================================================================== */
  --container-max: 1640px;
  --container-editorial: 1240px;
  --container-narrow: 980px;
  --gutter-desktop: clamp(24px, 4.5vw, 80px);
  --gutter-mobile: 20px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Elevations */
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 18px 45px rgba(255, 128, 0, 0.12);
  --shadow-glow: 0 0 32px var(--accent-momentum-glow);

  /* Animation Easing */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-sharp: cubic-bezier(0.25, 1, 0.5, 1);

  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-medium: 500ms;
  --duration-slow: 800ms;

  --height-ticker: 36px;
  --height-header: 72px;
}