/**
 * ═══════════════════════════════════════════════════════════════════════════
 * ChaozCode Design System v7.0 - CSS Custom Properties
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * Source of Truth: style-guide.html
 * Auto-extracted: 2026-02-04
 * Total Variables: 70
 * 
 * OKLCH Color System - Modern, wide-gamut, perceptually uniform
 * Fluid Typography - clamp() based responsive scaling
 * Fluid Spacing - Proportional spacing across viewports
 * 
 * Usage: <link rel="stylesheet" href="/css/design-system-variables.css">
 * ═══════════════════════════════════════════════════════════════════════════
 */

:root {

    /* ─────────────────────────────────────────────────────────────────────
       Primary Brand Colors
       ───────────────────────────────────────────────────────────────────── */
    --primary-1: oklch(98% 0.01 265);
    --primary-2: oklch(95% 0.02 265);
    --primary-3: oklch(90% 0.04 265);
    --primary-4: oklch(85% 0.07 265);
    --primary-5: oklch(78% 0.10 265);
    --primary-6: oklch(70% 0.13 265);
    --primary-7: oklch(62% 0.15 265);
    --primary-8: oklch(55% 0.16 265);
    --primary-9: oklch(50% 0.17 265);
    --primary-10: oklch(45% 0.16 265);
    --primary-11: oklch(40% 0.14 265);
    --primary-12: oklch(25% 0.08 265);
    --text-primary: oklch(95% 0.01 265);
    --gradient-primary: linear-gradient(135deg, var(--primary-9), var(--secondary-9));

    /* ─────────────────────────────────────────────────────────────────────
       Secondary Colors
       ───────────────────────────────────────────────────────────────────── */
    --secondary-1: oklch(98% 0.01 300);
    --secondary-9: oklch(50% 0.18 300);
    --secondary-12: oklch(25% 0.10 300);
    --text-secondary: oklch(75% 0.02 265);

    /* ─────────────────────────────────────────────────────────────────────
       Semantic Colors (Success, Warning, Danger, etc.)
       ───────────────────────────────────────────────────────────────────── */
    --accent: oklch(75% 0.20 330);
    --accent-glow: oklch(75% 0.20 330 / 0.4);
    --success: oklch(65% 0.18 145);
    --warning: oklch(75% 0.16 85);
    --danger: oklch(60% 0.22 25);
    --info: oklch(65% 0.15 230);

    /* ─────────────────────────────────────────────────────────────────────
       Background Colors
       ───────────────────────────────────────────────────────────────────── */
    --bg-darkest: oklch(8% 0 0);
    --bg-dark: oklch(12% 0.005 265);
    --bg-surface: oklch(16% 0.008 265);
    --bg-elevated: oklch(20% 0.01 265);
    --bg-hover: oklch(25% 0.012 265);

    /* ─────────────────────────────────────────────────────────────────────
       Text Colors
       ───────────────────────────────────────────────────────────────────── */
    --text-muted: oklch(55% 0.02 265);

    /* ─────────────────────────────────────────────────────────────────────
       Border Colors
       ───────────────────────────────────────────────────────────────────── */
    --border-default: oklch(30% 0.03 265 / 0.5);
    --border-hover: oklch(50% 0.10 265 / 0.5);

    /* ─────────────────────────────────────────────────────────────────────
       Gradients
       ───────────────────────────────────────────────────────────────────── */
    --gradient-glow: radial-gradient(ellipse at center, var(--primary-9) 0%, transparent 70%);

    /* ─────────────────────────────────────────────────────────────────────
       Fluid Typography
       ───────────────────────────────────────────────────────────────────── */
    --fluid-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.85rem);
    --fluid-sm: clamp(0.85rem, 0.75rem + 0.4vw, 1rem);
    --fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
    --fluid-md: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem);
    --fluid-lg: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    --fluid-xl: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
    --fluid-2xl: clamp(2rem, 1.4rem + 2.8vw, 3.75rem);
    --fluid-3xl: clamp(2.5rem, 1.6rem + 4vw, 5rem);
    --fluid-hero: clamp(3rem, 2rem + 5vw, 7rem);

    /* ─────────────────────────────────────────────────────────────────────
       Fluid Spacing
       ───────────────────────────────────────────────────────────────────── */
    --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.85rem);
    --space-md: clamp(0.75rem, 0.6rem + 0.8vw, 1.35rem);
    --space-lg: clamp(1rem, 0.8rem + 1vw, 1.75rem);
    --space-xl: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
    --space-2xl: clamp(2rem, 1.4rem + 2.8vw, 4.25rem);
    --space-3xl: clamp(3rem, 2rem + 4.5vw, 6.5rem);

    /* ─────────────────────────────────────────────────────────────────────
       Shadows
       ───────────────────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.12), 0 1px 2px oklch(0% 0 0 / 0.24);
    --shadow-md: 0 4px 6px oklch(0% 0 0 / 0.15), 0 2px 4px oklch(0% 0 0 / 0.12);
    --shadow-lg: 0 10px 25px oklch(0% 0 0 / 0.2), 0 6px 10px oklch(0% 0 0 / 0.15);
    --shadow-xl: 0 20px 40px oklch(0% 0 0 / 0.25);
    --shadow-glow: 0 0 40px var(--primary-9);

    /* ─────────────────────────────────────────────────────────────────────
       Border Radius
       ───────────────────────────────────────────────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ─────────────────────────────────────────────────────────────────────
       Transitions & Animations
       ───────────────────────────────────────────────────────────────────── */
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    /* ─────────────────────────────────────────────────────────────────────
       Z-Index Layers
       ───────────────────────────────────────────────────────────────────── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-toast: 500;

    /* ─────────────────────────────────────────────────────────────────────
       Other Variables
       ───────────────────────────────────────────────────────────────────── */
    --touch-min: max(44px, 2.75rem);

}



/* ═══════════════════════════════════════════════════════════════════════════
   EXTENDED VARIABLES (From Page-Specific Styles)
   ═══════════════════════════════════════════════════════════════════════════
   
   These variables were found across various pages and may be useful for
   maintaining consistency. Some are duplicates with different values.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

    /* ─────────────────────────────────────────────────────────────────────
       Extended Color Palette
       ───────────────────────────────────────────────────────────────────── */
    --accent-cyan: oklch(70% 0.15 200);
    --accent-gold: oklch(75% 0.15 85);
    --accent-green: oklch(65% 0.2 160);
    --accent-hover: #8b5cf6;
    --accent-light: #818cf8;
    --accent-orange: oklch(70% 0.18 50);
    --accent-pink: oklch(65% 0.2 350);
    --accent-red: oklch(60% 0.25 25);
    --accent-secondary: #764ba2;
    --conscience-green: #10b981;
    --cp-accent-secondary: #8b5cf6;
    --cyan: oklch(70% 0.12 200);
    --full: #3fb950;
    --gradient-cyan: linear-gradient(135deg, var(--accent-cyan), var(--primary-9));
    --gradient-gold: linear-gradient(135deg, oklch(70% 0.15 85), oklch(65% 0.18 45));
    --gradient-green: linear-gradient(135deg, oklch(60% 0.18 160), oklch(55% 0.15 145));
    --gradient-pink: linear-gradient(135deg, var(--accent-pink), var(--secondary-9));
    --green: oklch(65% 0.2 145);
    --green-dim: oklch(25% 0.08 145);
    --lib-accent-light: rgba(139, 92, 246, 0.15);
    --matrix: #00ff41;
    --red: oklch(60% 0.22 25);
    --red-dim: oklch(25% 0.1 25);
    --yellow: oklch(75% 0.18 85);
    --yellow-dim: oklch(30% 0.1 85);

    /* ─────────────────────────────────────────────────────────────────────
       Extended Background Colors
       ───────────────────────────────────────────────────────────────────── */
    --bg: oklch(12% 0.005 265);
    --bg-base: oklch(15% 0.02 265);
    --bg-card: #111827;
    --bg-card-hover: #1f2937;
    --bg-code: oklch(8% 0.005 265);
    --bg-darker: #010409;
    --bg-glass: oklch(12% 0.008 265 / 0.7);
    --bg-input: #21262d;
    --bg-panel: #11152a;
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --cp-bg: #0f172a;
    --cp-card-hover: #334155;
    --dark: #0a0e27;
    --elevated: oklch(20% 0.01 265);
    --error-bg: oklch(60% 0.20 25 / 0.1);
    --gradient-surface: linear-gradient(180deg, rgba(124, 58, 237, 0.05) 0%, transparent 100%);
    --hover: oklch(25% 0.012 265);
    --info-bg: oklch(60% 0.15 230 / 0.1);
    --primary-dark: oklch(40% 0.14 265);
    --primary-hover: #8b5cf6;
    --success-bg: oklch(60% 0.15 140 / 0.1);
    --surface: oklch(16% 0.008 265);
    --surface-active: #30363d;
    --surface-hover: #21262d;
    --surface-light: #21262d;
    --warning-bg: oklch(70% 0.16 85 / 0.1);

    /* ─────────────────────────────────────────────────────────────────────
       Extended Semantic Colors
       ───────────────────────────────────────────────────────────────────── */
    --cp-danger: #ef4444;
    --cp-success: #22c55e;
    --cp-warning: #f59e0b;
    --error: oklch(60% 0.2 25);
    --error-10: oklch(50% 0.22 25);
    --error-9: oklch(60% 0.20 25);
    --error-border: oklch(60% 0.20 25 / 0.3);
    --gradient-warning: linear-gradient(135deg, var(--accent-orange), var(--accent-gold));
    --info-9: oklch(60% 0.15 230);
    --success-10: oklch(50% 0.18 140);
    --success-9: oklch(55% 0.16 145);
    --success-border: oklch(60% 0.15 140 / 0.3);
    --warning-9: oklch(70% 0.16 85);
    --warning-border: oklch(70% 0.16 85 / 0.3);

    /* ─────────────────────────────────────────────────────────────────────
       Extended Gradients
       ───────────────────────────────────────────────────────────────────── */
    --gradient: linear-gradient(135deg, var(--primary-9), var(--secondary-9));
    --gradient-radial: radial-gradient(ellipse at center, var(--primary-9), transparent 70%);

    /* ─────────────────────────────────────────────────────────────────────
       Extended Shadows
       ───────────────────────────────────────────────────────────────────── */
    --shadow: 0 4px 20px oklch(0% 0 0 / 0.3);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-glow-lg: 0 0 100px oklch(50% 0.17 265 / 0.4);
    --shadow-input: 0 0 0 3px var(--primary-glow);

    /* ─────────────────────────────────────────────────────────────────────
       Extended Typography
       ───────────────────────────────────────────────────────────────────── */
    --fluid-4xl: clamp(3rem, 2.5rem + 4vw, 5.5rem);
    --fluid-5xl: clamp(4rem, 3rem + 5vw, 7rem);
    --font-mono: 'SF Mono', 'Fira Code', monospace;

    /* ─────────────────────────────────────────────────────────────────────
       Extended Spacing
       ───────────────────────────────────────────────────────────────────── */
    --space-4xl: clamp(4rem, 3rem + 5vw, 8rem);

    /* ─────────────────────────────────────────────────────────────────────
       Extended Borders & Radius
       ───────────────────────────────────────────────────────────────────── */
    --border: oklch(30% 0.03 265 / 0.5);
    --border-color: rgba(102, 126, 234, 0.35);
    --border-glow: oklch(50% 0.17 265 / 0.3);
    --border-light: #3d4450;
    --cp-border: #334155;
    --radius: 12px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;

    /* ─────────────────────────────────────────────────────────────────────
       Miscellaneous Extended Variables
       ───────────────────────────────────────────────────────────────────── */
    --analysis: #58a6ff;
    --angle: 360deg;
    --animation-timing: 200ms ease-in-out;
    --background: #0d1117;
    --bar-height: 3px;
    --bar-width: 30px;
    --card: #1a1f3a;
    --card-accent: linear-gradient(90deg, oklch(65% 0.2 160), oklch(60% 0.18 180));
    --card-glow: oklch(65% 0.2 160 / 0.2);
    --cat-color: var(--cat-earthquake);
    --cat-earthquake: #ef4444;
    --cat-fire: #f97316;
    --cat-flood: #06b6d4;
    --cat-humanitarian: #ec4899;
    --cat-news: #8b5cf6;
    --cat-weather: #3b82f6;
    --conscience-glow: rgba(139, 92, 246, 0.4);
    --conscience-purple: #8b5cf6;
    --cp-accent: #6366f1;
    --cp-card: #1e293b;
    --cp-text: #f1f5f9;
    --cp-text-muted: #94a3b8;
    --duration: 250ms;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --execution: #f0883e;
    --hamburger-gap: 6px;
    --lib-accent: #8b5cf6;
    --lib-bookmarks: #ec4899;
    --lib-code: #6366f1;
    --lib-docs: #10b981;
    --lib-notes: #f59e0b;
    --mode-color: var(--analysis);
    --muted: oklch(55% 0.02 265);
    --num: 0;
    --primary: oklch(55% 0.2 265);
    --primary-dim: oklch(40% 0.15 265);
    --primary-glow: oklch(60% 0.17 265 / 0.3);
    --primary-light: oklch(60% 0.15 265);
    --secondary: oklch(55% 0.2 300);
    --text: oklch(95% 0.01 265);
    --text-dim: #8b949e;
    --text-subtle: #6e7681;
    --transformation: #a78bfa;
    --transition: all 0.2s ease;
    --transition-base: 250ms ease;
    --transition-fast: 150ms ease;
    --tx: 50px;
    --ty: -100px;

}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDE
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"], .light-theme {

    /* ── Core Backgrounds ─────────────────────────────────────────────── */
    --bg-darkest: oklch(100% 0 0);
    --bg-dark: oklch(98% 0.005 265);
    --bg-surface: oklch(96% 0.008 265);
    --bg-elevated: oklch(100% 0 0);
    --bg-hover: oklch(94% 0.01 265);

    /* ── Core Text ────────────────────────────────────────────────────── */
    --text-primary: oklch(15% 0.01 265);
    --text-secondary: oklch(35% 0.02 265);
    --text-muted: oklch(50% 0.02 265);

    /* ── Core Borders ─────────────────────────────────────────────────── */
    --border-default: oklch(85% 0.02 265 / 0.5);
    --border-hover: oklch(70% 0.05 265 / 0.5);

    /* ── Core Shadows ─────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.12);
    --shadow-md: 0 4px 6px oklch(0% 0 0 / 0.06), 0 2px 4px oklch(0% 0 0 / 0.06);
    --shadow-lg: 0 10px 15px oklch(0% 0 0 / 0.06), 0 4px 6px oklch(0% 0 0 / 0.04);
    --shadow-xl: 0 20px 40px oklch(0% 0 0 / 0.08);
    --shadow-glow: 0 0 40px oklch(50% 0.17 265 / 0.15);

    /* ── Extended Backgrounds ─────────────────────────────────────────── */
    --bg: oklch(98% 0.005 265);
    --bg-base: oklch(97% 0.005 265);
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-code: oklch(96% 0.005 265);
    --bg-darker: #f1f5f9;
    --bg-glass: oklch(100% 0 0 / 0.7);
    --bg-input: #ffffff;
    --bg-panel: #f8fafc;
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-tertiary: #e2e8f0;
    --cp-bg: #ffffff;
    --cp-card-hover: #f1f5f9;
    --dark: #ffffff;
    --elevated: oklch(100% 0 0);
    --hover: oklch(95% 0.005 265);
    --surface: oklch(98% 0.005 265);
    --surface-active: #e2e8f0;
    --surface-hover: #f1f5f9;
    --surface-light: #f1f5f9;
    --background: #ffffff;
    --card: #ffffff;
    --cp-card: #ffffff;

    /* ── Semantic Backgrounds ─────────────────────────────────────────── */
    --error-bg: oklch(60% 0.20 25 / 0.08);
    --info-bg: oklch(60% 0.15 230 / 0.08);
    --success-bg: oklch(60% 0.15 140 / 0.08);
    --warning-bg: oklch(70% 0.16 85 / 0.08);
    --gradient-surface: linear-gradient(180deg, rgba(124, 58, 237, 0.03) 0%, transparent 100%);

    /* ── Extended Text ────────────────────────────────────────────────── */
    --text: oklch(15% 0.01 265);
    --text-dim: #57606a;
    --text-subtle: #6e7681;
    --muted: oklch(45% 0.02 265);
    --cp-text: #0f172a;
    --cp-text-muted: #64748b;

    /* ── Extended Borders ─────────────────────────────────────────────── */
    --border: oklch(85% 0.02 265 / 0.5);
    --border-color: rgba(102, 126, 234, 0.2);
    --border-glow: oklch(50% 0.17 265 / 0.15);
    --border-light: #d1d5db;
    --cp-border: #e2e8f0;

    /* ── Extended Shadows ─────────────────────────────────────────────── */
    --shadow: 0 4px 20px oklch(0% 0 0 / 0.08);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-glow-lg: 0 0 100px oklch(50% 0.17 265 / 0.12);
    --shadow-input: 0 0 0 3px oklch(60% 0.17 265 / 0.15);

    /* ── Accent Adjustments (slightly bolder on light bg) ─────────────── */
    --primary: oklch(50% 0.2 265);
    --primary-dim: oklch(45% 0.15 265);
    --primary-light: oklch(55% 0.15 265);
    --primary-glow: oklch(55% 0.17 265 / 0.2);
    --primary-dark: oklch(35% 0.14 265);
    --primary-hover: #7c3aed;
    --accent-hover: #7c3aed;
    --accent-light: #6366f1;
    --accent-secondary: #6d28d9;
    --secondary: oklch(50% 0.2 300);
    --cp-accent: #4f46e5;
    --cp-accent-secondary: #7c3aed;

    /* ── Misc ─────────────────────────────────────────────────────────── */
    --conscience-glow: rgba(139, 92, 246, 0.2);
    --lib-accent-light: rgba(139, 92, 246, 0.1);
    --card-glow: oklch(65% 0.2 160 / 0.1);
}


/* Navbar space reservation handled by unified-navbar.js injection */

/* Reduce hero top padding — navbar already provides 60px body offset */
.hero {
    padding-top: var(--space-lg) !important;
}

/* Page-specific computed variables (may need adjustment per-page) */
/* These use calc() with other variables and may be context-dependent */