:root {
    /* ─────────────────────────────────────────────
       1. SOFT BLUE PALETTE 
       ───────────────────────────────────────────── */
    /* Main accent family */
    --color-soft-blue: #489add; /* primary */
    --color-rapberry: #dd489a; /* triadic & tetradic */
    --color-soft-orange: #dd8b48; /* complementary */
    --color-soft-red: #dd484f; /* split complementary */

    --color-blue: #484fdd; /* analogous */
    --color-soft-cyan: #48ddd6; /* analogous */
    --color-soft-violet: #8b48dd; /* analogous-to-analogous */

    --color-soft-green: #9add48; /* triadic */
    --color-cyan-lime-green: #48dd8b; /* tetradic */
    /* Light accents used in bubbles / subtle fills */
    --color-light-cyan: #c9f5dd;
    --color-extra-light-lime: #e6f9ef;
    /* ─────────────────────────────────────────────
       2. DARK ORANGE PALETTE 
       ───────────────────────────────────────────── */

    --color-dark-orange: #fb8c00; /* secondary highlight */
    /* Supporting vivid tones (used rarely) */
    --color-pure-blue: #0073ff;
    --color-pure-lime-green: #00ff8c;
    --color-pure-violet: #8c00ff;
    --color-pure-pink: #ff0073;
    --color-pure-cyan: #00f3ff;
    --color-split-blue: #0d00ff;
    --color-pure-red: #ff0d00;
    --color-pure-yellow: #f3ff00;
    /* ─────────────────────────────────────────────
       3. NEUTRAL LADDER (backgrounds & borders)
       Ordered from lightest to darkest
       ───────────────────────────────────────────── */
    /* Lightest surfaces */
    --color-panel-gray: #faf9f7; /* left panel, subtle backgrounds */
    --color-header-gray: #f0f0f0; /* header, vertical toolbar, footer band */
    /* Borders / separators */
    --color-border-subtle: #dddddd;
    /* ─────────────────────────────────────────────
       4. TEXT LADDER
       ───────────────────────────────────────────── */

    --color-text-muted: #9a9a9a; /* secondary text */
    --color-text-main: #484848; /* normal body text */

    --color-black-soft: #242424; /* headings / key labels */
    --color-black: #242424; /* alias for older rules */
    /* ─────────────────────────────────────────────
       5. LAYOUT METRICS (heights)
       Used by site.layout.css
       ───────────────────────────────────────────── */

    --header-row1-height: 48px;
    --header-row2-height: 48px;
    --footer-height: 96px;
    /* ─────────────────────────────────────────────
       6. SHAPES & ELEVATION
       ───────────────────────────────────────────── */
    /* Corner radius for panels / bubbles / buttons */
    --radius: 8px;
    --corner-radius: 6px; /* Fluent-ish default for controls */
    /* Soft drop shadow for cards and main surfaces */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    /* ─────────────────────────────────────────────
       7. SPACING SCALE
       ───────────────────────────────────────────── */

    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 16px;
    --space-l: 24px;
    --space-xl: 32px;
}