:root {
    /* Brand Colors */
    --color-primary: #0066CC;
    --color-secondary: #C9A961;
    --color-accent: #00D4AA;
    --color-deep: #031833;
    --color-dark: #0B1A2E;
    --color-muted: #6B7A90;
    --color-soft: #E0E7F5;
    --color-background: #F8FAFC;
    --color-panel: #101B2D;
    --color-panel-alt: #1B2B47;
    --color-success: #28C199;
    --color-warning: #FFB347;
    --color-error: #EC4F60;

    /* Typography */
    --font-sans: 'DIN Alternate', 'Poppins', 'Microsoft YaHei', 'PingFang SC', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-size-base: 16px;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2.25rem;
    --font-size-display: clamp(2.6rem, 4vw, 4rem);

    /* Layout */
    --container-width: 1200px;
    --gutter: 1.5rem;
    --radius-sm: 10px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --shadow-soft: 0 10px 30px rgba(4, 28, 63, 0.18);
    --shadow-hard: 0 20px 60px rgba(3, 15, 31, 0.45);
    --header-height: 82px;
    --side-nav-width: 68px;

    /* Animation */
    --animate-speed-fast: 0.35s;
    --animate-speed-base: 0.6s;
    --animate-speed-slow: 1.5s;
    --curve-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Gradient */
    --gradient-brand: linear-gradient(120deg, #0B1A2E 0%, #003A75 45%, #0077D6 100%);
    --gradient-digital: radial-gradient(circle at top, rgba(0, 212, 170, 0.25), transparent), radial-gradient(circle at 20% 20%, rgba(0, 102, 204, 0.35), transparent), #071426;
    --gradient-card: linear-gradient(135deg, rgba(0, 102, 204, 0.15), rgba(0, 212, 170, 0.05));
    --gradient-fabric: linear-gradient(110deg, rgba(10, 39, 73, 0.92), rgba(8, 24, 50, 0.95));

    /* Breakpoints */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}