/* Site-wide design variables. */
:root {
    /* Background */
    --color-bg-home: #0B1A2B;
    --color-bg-primary: #0B1A2B;
    --color-bg-secondary: #10243A;
    --color-bg-hover: #16304D;

    /* Accent */
    --color-accent: #D4AF37;
    --color-accent-soft: #E6C76B;
    --color-accent-muted: #A88F2A;

    /* Text */
    --color-text-primary: #E8EEF5;
    --color-text-secondary: #AAB6C4;
    --color-text-muted: #6B7C8F;

    /* Border */
    --color-border: #1F3A5A;
    --color-border-light: #AFAAAA;
    --color-divider: #162A40;

    /* Danger */
    --color-danger: #C84B4B;

    /* Header */
    --header-bg-color: rgba(11, 26, 43, 0.8);
    --header-sp-bg-color: rgba(7, 22, 39, 0.5);

    /* Layout */
    --container: 920px;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;

    /* z-index */
    --z-header: 100;
    --z-overlay: 1000;
}