/* ============================================================
   Clockwork.Design — CSS Design Tokens
   Single source of truth for the CWE visual identity
   ============================================================ */

:root {
    /* --- Backgrounds --- */
    --cwe-bg-deep: #080c16;
    --cwe-bg-base: #0d1321;
    --cwe-bg-secondary: #111827;
    --cwe-bg-surface: #162032;
    --cwe-bg-elevated: #1c2a42;
    --cwe-bg-glass: rgba(22, 32, 50, 0.7);

    /* --- Accent (CWE Orange) --- */
    --cwe-accent: #d97300;
    --cwe-accent-bright: #f0a030;
    --cwe-accent-warm: #e88a1a;
    --cwe-accent-dim: #a85a00;
    --cwe-accent-glow: rgba(217, 115, 0, 0.10);
    --cwe-accent-glow-strong: rgba(217, 115, 0, 0.25);

    /* --- Text --- */
    --cwe-text-primary: #e8e4df;
    --cwe-text-secondary: #8a9bb5;
    --cwe-text-muted: #556580;
    --cwe-text-accent: #d97300;

    /* --- Borders --- */
    --cwe-border: #1a2a40;
    --cwe-border-subtle: #141f30;
    --cwe-border-accent: rgba(217, 115, 0, 0.25);

    /* --- Typography --- */
    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-body: 'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* --- Border Radius --- */
    --cwe-radius-sm: 6px;
    --cwe-radius-md: 12px;
    --cwe-radius-lg: 20px;
    --cwe-radius-xl: 28px;

    /* --- Shadows --- */
    --cwe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --cwe-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --cwe-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.08);
    --cwe-shadow-glow: 0 0 20px rgba(217, 115, 0, 0.15);

    /* --- Transitions --- */
    --cwe-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --cwe-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --cwe-transition-fast: 0.2s var(--cwe-ease-out-expo);
    --cwe-transition-med: 0.4s var(--cwe-ease-out-expo);
    --cwe-transition-slow: 0.7s var(--cwe-ease-out-expo);

    /* --- Containers --- */
    --cwe-container-max: 1200px;
    --cwe-container-wide: 1400px;
    --cwe-section-pad: clamp(4rem, 8vw, 8rem);

    /* --- Backwards compatibility aliases --- */
    --cwe-bg-primary: var(--cwe-bg-base);
    --radius-sm: var(--cwe-radius-sm);
    --radius-md: var(--cwe-radius-md);
    --radius-lg: var(--cwe-radius-lg);
    --radius-xl: var(--cwe-radius-xl);
    --ease-out-expo: var(--cwe-ease-out-expo);
    --ease-spring: var(--cwe-ease-spring);
    --transition-fast: var(--cwe-transition-fast);
    --transition-med: var(--cwe-transition-med);
    --transition-slow: var(--cwe-transition-slow);
    --section-pad: var(--cwe-section-pad);
    --container-max: var(--cwe-container-max);
    --container-wide: var(--cwe-container-wide);
}