/**
 * ZINCAM/DEV — Design System Tokens
 * Dark (Default) & Light Mode Themes
 */

:root {
    /* Color Palette — Dark Theme (Default) */
    --bg-primary: #060709;
    --bg-secondary: #0d0f14;
    --bg-tertiary: #131720;
    --bg-elevated: #1a1e2a;
    
    --surface-glass: rgba(6, 7, 9, 0.82);
    --surface-glass-border: rgba(255, 255, 255, 0.08);

    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --text-faint: #4b5563;

    /* Zincam Red & Accents */
    --signal-red: #ff3333;
    --signal-red-hover: #ff4d4d;
    --signal-red-deep: #cc2222;
    --signal-red-glow: rgba(255, 51, 51, 0.22);
    --signal-red-dim: rgba(255, 51, 51, 0.08);

    --signal-green: #10b981;
    --signal-green-glow: rgba(16, 185, 129, 0.3);

    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.16);
    --border-active: rgba(255, 255, 255, 0.3);
    --border-red: rgba(255, 51, 51, 0.35);

    --grid-line: rgba(255, 255, 255, 0.02);
    --browser-bar-bg: #08090d;
    --browser-screen-bg: #050608;

    /* Typography */
    --font-display: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Layout & Spacing */
    --container-max: 1320px;
    --container-narrow: 940px;
    --container-padding: clamp(1.25rem, 4vw, 3rem);
    
    --header-height: 72px;

    /* Transitions & Motion */
    --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: 250ms;
    --duration-smooth: 400ms;

    /* Radii */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-pill: 9999px;
}

/* Light Mode Overrides */
[data-theme="light"] {
    --bg-primary: #f4f6f8;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e9ecef;
    --bg-elevated: #dee2e6;

    --surface-glass: rgba(244, 246, 248, 0.88);
    --surface-glass-border: rgba(0, 0, 0, 0.08);

    --text-primary: #0c0f14;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --text-faint: #adb5bd;

    --signal-red: #e60000;
    --signal-red-hover: #cc0000;
    --signal-red-deep: #b30000;
    --signal-red-glow: rgba(230, 0, 0, 0.18);
    --signal-red-dim: rgba(230, 0, 0, 0.06);

    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-medium: rgba(0, 0, 0, 0.16);
    --border-active: rgba(0, 0, 0, 0.35);
    --border-red: rgba(230, 0, 0, 0.4);

    --grid-line: rgba(0, 0, 0, 0.035);
    --browser-bar-bg: #e5e9f0;
    --browser-screen-bg: #f8fafc;
}