:root {
    /* ==========================================================================
       COLOSIAN CORE DESIGN SYSTEM
       Matched to colosian.com dark mode
       ========================================================================== */

    --bg: #111315;
    --bg-elevated: rgba(24, 26, 28, 0.88);
    --bg-strong: #181a1c;
    --bg-soft: rgba(255, 255, 255, 0.05);

    --text: #f3f4f6;
    --text-strong: #ffffff;
    --muted: rgba(255, 255, 255, 0.68);
    --thin: rgba(255, 255, 255, 0.46);

    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.14);

    --chip-bg: rgba(255, 255, 255, 0.05);
    --chip-border: rgba(255, 255, 255, 0.10);

    --panel-dark: rgba(18, 20, 22, 0.74);
    --panel-dark-strong: rgba(18, 20, 22, 0.94);
    --panel-dark-soft: rgba(255, 255, 255, 0.07);

    --white-soft: rgba(255, 255, 255, 0.92);
    --white-mid: rgba(255, 255, 255, 0.75);
    --white-thin: rgba(255, 255, 255, 0.60);
    --white-faint: rgba(255, 255, 255, 0.45);
    --white-border: rgba(255, 255, 255, 0.12);

    --black-soft: rgba(255, 255, 255, 0.05);
    --black-mid: rgba(255, 255, 255, 0.10);

    --shadow: 0 22px 80px rgba(0, 0, 0, 0.40);
    --shadow-strong: 0 30px 90px rgba(0, 0, 0, 0.52);

    /* ==========================================================================
       COLOSIAN MARKETS LEGACY VARIABLE MAPPING

       Keep these names so existing Markets CSS continues working.
       ========================================================================== */

    --color-bg: var(--bg);
    --color-bg-elevated: var(--bg-elevated);
    --color-bg-panel: var(--bg-strong);
    --color-bg-panel-2: var(--panel-dark);

    --color-border: var(--border);
    --color-border-strong: var(--border-strong);

    --color-text: var(--text);
    --color-text-strong: var(--text-strong);
    --color-text-soft: var(--muted);
    --color-text-muted: var(--thin);

    /*
     * Colosian is intentionally neutral.
     * "Brand" is white rather than purple.
     */
    --color-brand: var(--text);
    --color-brand-soft: var(--muted);
    --color-brand-deep: var(--bg-strong);

    /* ==========================================================================
       MARKET STATUS COLOURS
       ========================================================================== */

    --color-positive: #20c997;
    --color-negative: #ff6b6b;
    --color-warning: #f0b429;
    --color-info: #4dabf7;

    /* ==========================================================================
       SHADOWS
       ========================================================================== */

    --shadow-lg: var(--shadow-strong);
    --shadow-md: var(--shadow);

    /* ==========================================================================
       RADII
       ========================================================================== */

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ==========================================================================
       LAYOUT
       ========================================================================== */

    --container-width: 1200px;

    /* ==========================================================================
       SPACING
       ========================================================================== */

    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ==========================================================================
       TYPOGRAPHY
       ========================================================================== */

    --font-sans:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}