/* === Colour Tokens === */
:root {
    --bg-base:            #0F1115;
    --bg-surface-1:       #161A22;
    --bg-surface-2:       #1D2230;
    --bg-surface-3:       #232940;

    --border-subtle:      #252B3A;
    --border-strong:      #323A4E;

    --text-primary:       #E7EAF1;
    --text-secondary:     #9AA3B8;
    --text-muted:         #6B7388;
    --text-on-accent:     #FFFFFF;

    --accent:             #1D7A45;
    --accent-hover:       #166135;
    --accent-subtle:      rgba(29, 122, 69, 0.15);
    --accent-focus:       rgba(29, 122, 69, 0.35);

    --success:            #22C55E;
    --success-subtle:     rgba(34, 197, 94, 0.12);
    --warning:            #F59E0B;
    --warning-subtle:     rgba(245, 158, 11, 0.12);
    --danger:             #EF4444;
    --danger-subtle:      rgba(239, 68, 68, 0.12);
    --info:               #0EA5E9;
    --info-subtle:        rgba(14, 165, 233, 0.12);

    --status-online:      #22C55E;
    --status-offline:     #6B7388;
    --status-warning:     #F59E0B;
}

/* === Typography === */
:root {
    --font-sans:   "Montserrat", system-ui, -apple-system, sans-serif;
    --font-mono:   ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --text-xs:    11px;
    --text-sm:    12px;
    --text-base:  14px;
    --text-md:    15px;
    --text-lg:    17px;
    --text-xl:    20px;
    --text-2xl:   24px;

    --leading:    1.5;
    --tracking-tight: -0.01em;
}

/* === Spacing === */
:root {
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
}

/* === Border Radius (MAX 4px per spec) === */
:root {
    --radius-sm:  2px;
    --radius-md:  3px;
    --radius-lg:  4px;
}

/* === Elevation / Shadows === */
:root {
    --shadow-xs:  0 1px 0 rgba(0, 0, 0, 0.30);
    --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.30);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.40);
}

/* === Motion === */
:root {
    --ease-out:       cubic-bezier(0.2, 0.6, 0.3, 1);
    --duration-fast:  100ms;
    --duration-base:  150ms;
    --duration-slow:  250ms;
}

/* === Z-Index === */
:root {
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
}