/* Design tokens — the one source of colour, type, space, radius and elevation; how to use them (and light / dark) is in docs/contributors/UI.md. */
:root {
    color-scheme: light;

    /* gray */
    --gray-0: #ffffff;
    --gray-25: #fcfcfd;
    --gray-50: #f7f8fb;
    --gray-100: #eff2f6;
    --gray-150: #e7ebf1;
    --gray-200: #dce1e9;
    --gray-300: #c7cfdb;
    --gray-400: #98a2b3;
    --gray-500: #667085;
    --gray-600: #475467;
    --gray-700: #344054;
    --gray-800: #1d2939;
    --gray-900: #101828;
    /* brand */
    --brand-50: #eef1fa;
    --brand-100: #dce2f4;
    --brand-200: #b8c3e7;
    --brand-300: #8b9bd4;
    --brand-400: #5b70bd;
    --brand-500: #3249a2;
    --brand-600: #1a3389;
    --brand-700: #0B2371;
    --brand-800: #091c5c;
    --brand-900: #071648;
    --brand-950: #040d2e;
    /* accent */
    --accent-50: #fff5ea;
    --accent-100: #fee5c9;
    --accent-200: #fdca93;
    --accent-300: #fbab5a;
    --accent-400: #fa9b3e;
    --accent-500: #FA8C23;
    --accent-600: #e2760f;
    --accent-700: #b55c08;
    --accent-800: #8a4608;
    --accent-900: #6b370a;
    /* success */
    --success-50: #ecfdf3;
    --success-100: #d1fadf;
    --success-200: #a6f4c5;
    --success-300: #6ce9a6;
    --success-400: #32d583;
    --success-500: #12b76a;
    --success-600: #079455;
    --success-700: #067647;
    --success-800: #085d3a;
    --success-900: #074d31;
    /* warning */
    --warning-50: #fffaeb;
    --warning-100: #fef0c7;
    --warning-200: #fedf89;
    --warning-300: #fec84b;
    --warning-400: #fdb022;
    --warning-500: #f79009;
    --warning-600: #dc6803;
    --warning-700: #b54708;
    --warning-800: #93370d;
    --warning-900: #7a2e0e;
    /* danger */
    --danger-50: #fef3f2;
    --danger-100: #fee4e2;
    --danger-200: #fecdca;
    --danger-300: #fda29b;
    --danger-400: #f97066;
    --danger-500: #f04438;
    --danger-600: #d92d20;
    --danger-700: #b42318;
    --danger-800: #912018;
    --danger-900: #7a271a;
    /* info */
    --info-50: #eff8ff;
    --info-100: #d1e9ff;
    --info-200: #b2ddff;
    --info-300: #84caff;
    --info-400: #53b1fd;
    --info-500: #2e90fa;
    --info-600: #1570ef;
    --info-700: #175cd3;
    --info-800: #1849a9;
    --info-900: #194185;
    /* violet */
    --violet-50: #f4f3ff;
    --violet-100: #ebe9fe;
    --violet-200: #d9d6fe;
    --violet-300: #bdb4fe;
    --violet-400: #9b8afb;
    --violet-500: #7a5af8;
    --violet-600: #6938ef;
    --violet-700: #5925dc;
    --violet-800: #4a1fb8;
    --violet-900: #3e1c96;

    /* Roles — what pages use. Each points at a scale step, so a theme only re-tunes the scales. */
    --c-bg: #edf0f5;                 /* app canvas behind cards — deep enough that white cards stand out */
    --c-surface: var(--gray-0);      /* cards, tables, panels, inputs */
    --c-surface-2: var(--gray-50);   /* table heads, wells, hovered rows */
    --c-surface-3: var(--gray-100);
    --c-border: var(--gray-200);
    --c-border-strong: var(--gray-300);
    --c-text: var(--gray-900);
    --c-text-2: var(--gray-600);
    --c-text-3: var(--gray-500);
    --c-text-4: var(--gray-400);
    --c-primary: var(--brand-700);   /* logo navy #0B2371 */
    --c-primary-hover: var(--brand-800);
    --c-primary-soft: var(--brand-50);
    --c-primary-text: var(--brand-700);
    --c-on-color: #ffffff;           /* text on a filled primary / success / danger surface — white in both themes */
    --c-accent: var(--accent-500);   /* logo orange #FA8C23 */
    --c-focus: rgba(11, 35, 113, .22);
    --c-overlay: rgba(16, 24, 40, .45);  /* behind modals and drawers */
    --c-topbar: rgba(255, 255, 255, .86);

    /* Sidebar — a soft tint of the brand blue, one colour top to bottom; the logo sits on it in its exact
       colours ("ECT" #0B2371, "rons" #FA8C23); the current page is a solid navy pill */
    --sb-bg: #9dade0;
    --sb-sheen: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, transparent 40%);
    --sb-bg-2: #c4cfef;              /* rail flyouts */
    --sb-border: #8696d0;
    --sb-line: #7b8dcb;              /* the tree line beside a module's pages */
    --sb-fill: rgba(255, 255, 255, .5);   /* the Jump-to field */
    --sb-fill-border: #8495d0;
    --sb-kbd-bg: #ffffff;
    --sb-scroll: #6f82c4;
    --sb-text: #112056;
    --sb-text-dim: #2c3966;
    --sb-text-strong: #0B2371;
    --sb-icon: #263670;
    --sb-hover: rgba(11, 35, 113, .12);
    --sb-active: #0B2371;
    --sb-active-text: #ffffff;
    --sb-icon-active: #FA8C23;
    --sb-indicator: #FA8C23;
    --sb-badge-bg: #fff1e2;
    --sb-badge-border: #f9cd9c;
    --sb-badge-text: #b55c08;
    --logo-plate: transparent;       /* the logo sits straight on the sidebar colour */
    --logo-plate-border: var(--sb-border);
    --sb-wordmark: #0B2371;          /* logo navy */
    --logo-orange: #FA8C23;          /* logo orange */
    --logo-org: #3c4a78;
    --logo-pill: #ffffff;            /* the sidebar logo's white pill — the same in both themes */
    --logo-pill-navy: #0B2371;
    --logo-pill-org: #3c4a78;
    --logo-pill-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 2px 8px rgba(16, 24, 40, .10);

    /* Elevation */
    --e-0: 0 0 0 1px var(--c-border);
    --e-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
    --e-2: 0 2px 4px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .05);
    --e-3: 0 4px 12px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
    --e-4: 0 12px 24px -4px rgba(16, 24, 40, .10), 0 4px 8px -4px rgba(16, 24, 40, .05);
    --e-5: 0 24px 48px -12px rgba(16, 24, 40, .22);

    /* Type */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-xs: 11.5px;
    --fs-sm: 12.5px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 17px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 30px;

    /* Space (4px grid) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;

    /* Radius */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-full: 999px;

    /* Motion */
    --ease: cubic-bezier(.2, .8, .2, 1);
    --t-fast: 120ms;
    --t-med: 200ms;

    /* Shell geometry */
    --sb-w: 252px;
    --sb-w-collapsed: 64px;
    --tb-h: 56px;
    --page-max: none;              /* pages use the full width beside the sidebar */
    --page-pad: 28px;

    /* ── Legacy aliases (older module CSS reads these) ─────────────────────────────── */
    --primary-blue: var(--c-primary);
    --primary-blue-dark: var(--brand-900);
    --secondary-blue: var(--brand-600);
    --light-blue: var(--brand-50);
    --light-gray: var(--gray-300);
    --primary-orange: var(--accent-500);
    --primary-orange-dark: var(--accent-600);
    --background: var(--c-bg);
    --white: var(--c-surface);
    --text: var(--c-text);
    --text-dim: var(--c-text-3);
    --outline-blue: var(--brand-500);
    --accent-blue: var(--brand-500);
    --gradient-bg: var(--c-surface);
    --primary-dark: var(--brand-900);
    --text-main: var(--c-text);
    --text-muted: var(--c-text-3);
    --topnav-height: var(--tb-h);
    --glass-bg: var(--c-surface);
    --glass-border: 1px solid var(--c-border);
    --glass-shadow: var(--e-1);
    --blur-strength: none;
    --box-shadow: var(--e-1);
    --border-radius: var(--r-lg);
    --font-family: var(--font-sans);
    --transition-speed: .18s;
    --shadow: var(--e-2);
}


:root[data-theme="dark"] {
    color-scheme: dark;

    /* gray */
    --gray-0: #252d44;
    --gray-25: #283049;
    --gray-50: #2b344e;
    --gray-100: #313b56;
    --gray-150: #37425e;
    --gray-200: #3e4a68;
    --gray-300: #4f5c7c;
    --gray-400: #7482a0;
    --gray-500: #9ea9c2;
    --gray-600: #bbc4d6;
    --gray-700: #d4dae6;
    --gray-800: #e7ebf2;
    --gray-900: #f6f8fb;
    /* brand */
    --brand-50: #2c3657;
    --brand-100: #303b63;
    --brand-200: #374476;
    --brand-300: #405092;
    --brand-400: #7d90e8;
    --brand-500: #5c74e0;
    --brand-600: #4a63d6;
    --brand-700: #a9b8f5;
    --brand-800: #c9d3fa;
    --brand-900: #e4e9fd;
    --brand-950: #f2f5fe;
    /* accent */
    --accent-50: #3f3840;
    --accent-100: #50403d;
    --accent-200: #694b39;
    --accent-300: #905c34;
    --accent-400: #fa9b3e;
    --accent-500: #FA8C23;
    --accent-600: #fb9a3c;
    --accent-700: #fdb36b;
    --accent-800: #fdca93;
    --accent-900: #fee5c9;
    /* success */
    --success-50: #233e49;
    --success-100: #21494c;
    --success-200: #1f5950;
    --success-300: #1c7257;
    --success-400: #32d583;
    --success-500: #12b76a;
    --success-600: #22c676;
    --success-700: #6ce9a6;
    --success-800: #a6f4c5;
    --success-900: #d1fadf;
    /* warning */
    --warning-50: #3e393d;
    --warning-100: #4f4138;
    --warning-200: #684d31;
    --warning-300: #8e5e26;
    --warning-400: #fdb022;
    --warning-500: #f79009;
    --warning-600: #faa016;
    --warning-700: #fec84b;
    --warning-800: #fedf89;
    --warning-900: #fef0c7;
    /* danger */
    --danger-50: #3d3043;
    --danger-100: #4e3242;
    --danger-200: #663440;
    --danger-300: #8a383e;
    --danger-400: #f97066;
    --danger-500: #f04438;
    --danger-600: #f45a4f;
    --danger-700: #fda29b;
    --danger-800: #fecdca;
    --danger-900: #fee4e2;
    /* info */
    --info-50: #26395a;
    --info-100: #274168;
    --info-200: #284d7e;
    --info-300: #2a5e9f;
    --info-400: #53b1fd;
    --info-500: #2e90fa;
    --info-600: #40a0fc;
    --info-700: #84caff;
    --info-800: #b2ddff;
    --info-900: #d1e9ff;
    /* violet */
    --violet-50: #2f325a;
    --violet-100: #363668;
    --violet-200: #403b7e;
    --violet-300: #50449e;
    --violet-400: #9b8afb;
    --violet-500: #7a5af8;
    --violet-600: #8a72fa;
    --violet-700: #bdb4fe;
    --violet-800: #d9d6fe;
    --violet-900: #ebe9fe;

    --c-bg: #1c2337;
    --c-primary: var(--brand-600);   /* the navy lifted so a button reads on a dark page */
    --c-primary-hover: var(--brand-500);
    --c-primary-text: var(--brand-700);
    --c-focus: rgba(124, 144, 232, .35);
    --c-overlay: rgba(0, 0, 0, .62);
    --c-topbar: rgba(37, 45, 68, .9);
    /* Sidebar on a dark page: deep brand navy, light text ("ECT" can't be the logo navy on navy, so it is white here) */
    --sb-bg: #182a66;
    --sb-sheen: radial-gradient(140% 70% at 0% 0%, rgba(255, 255, 255, .06) 0%, transparent 55%);
    --sb-bg-2: #1e3274;
    --sb-border: rgba(255, 255, 255, .09);
    --sb-line: rgba(255, 255, 255, .14);
    --sb-fill: rgba(255, 255, 255, .07);
    --sb-fill-border: rgba(255, 255, 255, .12);
    --sb-kbd-bg: rgba(255, 255, 255, .08);
    --sb-scroll: rgba(255, 255, 255, .20);
    --sb-text: #d3daf3;
    --sb-text-dim: #93a1d6;
    --sb-text-strong: #ffffff;
    --sb-icon: #9eacdf;
    --sb-hover: rgba(255, 255, 255, .08);
    --sb-active: rgba(255, 255, 255, .14);
    --sb-badge-bg: rgba(250, 140, 35, .16);
    --sb-badge-border: rgba(250, 140, 35, .38);
    --sb-badge-text: #fdb36b;
    --sb-wordmark: #ffffff;
    --logo-org: #93a1d6;
    --logo-pill-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    --e-1: 0 1px 2px rgba(0, 0, 0, .45);
    --e-2: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3);
    --e-3: 0 4px 12px -2px rgba(0, 0, 0, .55), 0 2px 4px -2px rgba(0, 0, 0, .35);
    --e-4: 0 12px 24px -4px rgba(0, 0, 0, .6), 0 4px 8px -4px rgba(0, 0, 0, .4);
    --e-5: 0 24px 48px -12px rgba(0, 0, 0, .7);
}