/* ==========================================================================
   ASI DEMOS - Design Tokens (Brutalist Editorial - Light Mode)
   Strict Palette: Paper (#FFFFFF), Void (#000000), Cobalt (#0047AB)
   ========================================================================== */

:root {
    /* Colors - Brutalist Editorial (Strict Palette) */
    --color-void: #000000;
    --color-paper: #FFFFFF;
    --color-accent: #0047AB; /* Cobalt Blue */

    /* Opacity variants - Cobalt */
    --color-accent-60: rgba(0, 71, 171, 0.6);
    --color-accent-30: rgba(0, 71, 171, 0.3);
    --color-accent-20: rgba(0, 71, 171, 0.2);
    --color-accent-10: rgba(0, 71, 171, 0.1);
    --color-accent-05: rgba(0, 71, 171, 0.05);
    --color-accent-03: rgba(0, 71, 171, 0.03);

    /* Void (dark) variants for light mode */
    --color-void-80: rgba(0, 0, 0, 0.8);
    --color-void-60: rgba(0, 0, 0, 0.6);
    --color-void-40: rgba(0, 0, 0, 0.4);
    --color-void-20: rgba(0, 0, 0, 0.2);
    --color-void-10: rgba(0, 0, 0, 0.1);
    --color-void-05: rgba(0, 0, 0, 0.05);
    --color-void-03: rgba(0, 0, 0, 0.03);

    /* Paper variants */
    --color-paper-60: rgba(255, 255, 255, 0.6);
    --color-paper-40: rgba(255, 255, 255, 0.4);
    --color-paper-10: rgba(255, 255, 255, 0.1);
    --color-paper-05: rgba(255, 255, 255, 0.05);
    --color-paper-02: rgba(255, 255, 255, 0.02);

    /* Semantic tokens - LIGHT MODE */
    --color-bg-primary: var(--color-paper);
    --color-bg-secondary: #FAFAFA;
    --color-bg-elevated: #F5F5F5;
    --color-text-primary: var(--color-void);
    --color-text-secondary: rgba(0, 0, 0, 0.6);
    --color-text-muted: rgba(0, 0, 0, 0.4);
    --color-border: rgba(0, 0, 0, 0.1);
    --color-border-subtle: rgba(0, 0, 0, 0.05);
    --color-grid-line: rgba(0, 0, 0, 0.04);
    --color-overlay-noise: 0.02;

    /* Status colors */
    --color-success: #16A34A;
    --color-warning: #CA8A04;
    --color-error: #DC2626;

    /* Typography */
    --font-display: 'Syne', sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Font Sizes */
    --text-xs: 10px;
    --text-sm: 12px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 48px;
    --text-5xl: 64px;
    --text-hero: clamp(48px, 10vw, 120px);

    /* Letter Spacing */
    --tracking-tighter: -0.08em;
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;
    --tracking-widest: 0.3em;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Container */
    --container-max: 1440px;
    --container-padding: 24px;

    /* Grid */
    --grid-cell-size: 40px;

    /* Transitions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-reveal: 800ms;
    --duration-panel: 400ms;

    /* Border */
    --border-thin: 1px;
    --border-normal: 2px;

    /* Z-Index Scale */
    --z-base: 0;
    --z-overlay: 10;
    --z-sticky: 100;
    --z-header: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;
}