/* ==========================================================================
   ASI CONSTRUCT - Design Tokens (Brutalist Editorial)
   Strict Palette: Void (#000000), Paper (#FFFFFF), Acid (#DFFF00)
   ========================================================================== */

: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-10: rgba(0, 71, 171, 0.1);
    --color-accent-03: rgba(0, 71, 171, 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 for theming (dark mode default) */
    --color-bg-primary: var(--color-void);
    --color-bg-secondary: #0a0a0a;
    --color-bg-elevated: rgba(255, 255, 255, 0.02);
    --color-text-primary: var(--color-paper);
    --color-text-secondary: rgba(255, 255, 255, 0.6);
    --color-text-muted: rgba(255, 255, 255, 0.4);
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-subtle: rgba(255, 255, 255, 0.05);
    --color-grid-line: rgba(255, 255, 255, 0.05);
    --color-overlay-noise: 0.05;
    --color-stroke: rgba(255, 255, 255, 0.4);

    /* Inverted section colors (for creed/inverted sections) */
    --color-inverted-bg: #1a1a1a;
    --color-inverted-text: var(--color-paper);
    --color-inverted-text-secondary: rgba(255, 255, 255, 0.7);

    /* Typography - Palantir-Inspired */
    /* Syne: Bold, architectural display font for headlines */
    /* Inter: Clean technical sans for body/UI */
    --font-display: 'Syne', sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Font Sizes - Fluid */
    --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(64px, 12vw, 180px);

    /* 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;

    /* 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;
}

/* ==========================================================================
   Light Theme Overrides
   ========================================================================== */

[data-theme="light"] {
    --color-bg-primary: #FAFAFA;
    --color-bg-secondary: #FFFFFF;
    --color-bg-elevated: rgba(0, 0, 0, 0.04);
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-muted: #888888;
    --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.05);
    --color-overlay-noise: 0.015;
    --color-stroke: rgba(0, 0, 0, 0.3);

    /* Inverted section colors (for creed/inverted sections) */
    --color-inverted-bg: #1a1a1a;
    --color-inverted-text: #FFFFFF;
    --color-inverted-text-secondary: rgba(255, 255, 255, 0.7);
}

/* Media Query Breakpoints Reference:
   - Mobile: max-width: 480px
   - Tablet: max-width: 768px
   - Desktop: max-width: 1024px
   - Wide: max-width: 1440px
*/