/* ── CBA Reference — color tokens & base resets ── */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
}

:root {
    /* Dark chrome (navbar, sidebar) */
    --chrome-high: #38383d;
    --chrome-low: #2e2e32;
    --chrome-border: #44444a;
    --chrome-text: #aaa;
    --chrome-text-bright: #f0f0f6;
    --chrome-text-mid: #c4c4d4;
    --chrome-text-dim: #686878;

    /* Light content surfaces */
    --surface-page: #efefef;
    --surface: #ffffff;
    --surface-raised: #f5f5f5;
    --surface-sunken: #ebebeb;
    --border: #ddd;
    --border-subtle: #eee;

    /* Text scale */
    --text: #1a1a1a;
    --text-2: #333;
    --text-3: #666;
    --text-muted: #888;
    --text-faint: #999;

    /* Accent green */
    --accent: #2a7a2a;
    --accent-hover: #1a5a1a;
    --accent-light: #6ab86a;
    --accent-light-hover: #8edd8e;
    --accent-btn: #1a7f3c;
    --accent-btn-hover: #166a32;
    --success: #4caf50;

    /* Role accents */
    --pilot-blue: #0070c0;
    --fa-purple: #7030a0;

    /* Color palette */
    --slate: #505060;
    --slate-tint: #35353a;
    --red: #8a2828;
    --red-tint: #3a2e2e;
    --orange: #7e4a10;
    --orange-tint: #3a3228;
    --green: #255a25;
    --green-tint: #2e382e;
    --teal: #185c5c;
    --teal-tint: #2e3838;
    --blue: #253888;
    --blue-tint: #2e3040;
    --purple: #4e1e80;
    --purple-tint: #352e3e;
}