/*
 * Theme colors: single source of truth.
 *
 * Brand palette (from the logo):
 *   --brand-blue   #3B82F6  primary blue
 *   --brand-navy   #0B1220  dark navy
 *   --brand-stroke #02193C  very dark blue stroke
 *   --brand-white  #FCFCFD  off-white
 *
 * Blue tints/shades are mixed from the brand blue. Grays (ink) and dark
 * surfaces are cool slate tones tuned to sit on the navy background, the
 * standard approach for professional dark UIs. Red / amber / green are kept
 * only where they mean something (breach, warning, success).
 */

:root {
    /* Brand */
    --brand-blue: #3B82F6;
    --brand-navy: #0B1220;
    --brand-stroke: #02193C;
    --brand-white: #FCFCFD;

    /* Blue tints (blue + off-white) and shades (blue + stroke) */
    --blue-50: #EEF3FD;
    --blue-100: #E1EBFC;
    --blue-200: #C6DAFB;
    --blue-300: #9CBFFA;
    --blue-400: #6BA0F8;
    --blue-600: #316FD5;
    --blue-700: #255AAF;
    --blue-800: #184183;

    /* Ink: cool slate grays for text and borders (light -> dark) */
    --ink-50: #F1F5F9;
    --ink-100: #E2E8F0;
    --ink-200: #CBD5E1;
    --ink-300: #AAB6C8;
    --ink-400: #8C99AD;
    --ink-500: #64748B;
    --ink-600: #475569;
    --ink-700: #334155;
    --ink-800: #1E293B;

    /* Dark UI surfaces (page is --brand-navy) */
    --surface-1: #111A2B;   /* cards, panels, footer */
    --band-alt: #111A2B;    /* alternate homepage section background */
    --band-cta: #0D1A33;    /* closing call-to-action band (bluer navy) */
    --deep-100: #172236;   /* raised / hover */
    --deep-200: #22304A;   /* borders */
    --deep-300: #2E3D59;   /* strong borders */

    /* Always the same in every mode */
    --on-accent: #FCFCFD;  /* text/icons on blue, red or green buttons */
}

/*
 * Colour modes
 * ------------
 * Components never use the raw palette above for neutral text or surfaces.
 * They use these mode tokens instead, which the three site modes set:
 *
 *   Default (no data-theme, or data-theme="default"): dark page with light
 *            sections. A light section or card gets class .bc-light.
 *   Light   (data-theme="light"): the whole site is light.
 *   Dark    (data-theme="dark"): the whole site is dark; .bc-light is ignored.
 *
 *   --sf-*  surfaces: page, band (alternate section), cta, 1 (cards),
 *           100 (raised/hover), 200 (borders), 300 (strong borders)
 *   --tx-*  text, from strongest (--tx-50, --tx-strong) to faintest (--tx-800)
 *   --ac-*  blue used as text or icons (links, highlighted words)
 *   --st-*  status text: red / green / amber
 *
 * The light values are soft greys, never pure white, so bright sections are
 * easy on the eyes on high-brightness screens. The header is always light and
 * keeps the raw palette.
 */
:root {
    color-scheme: dark;
    --sf-page: var(--brand-navy);
    --sf-band: var(--band-alt);
    --sf-cta: var(--band-cta);
    --sf-1: var(--surface-1);
    --sf-100: var(--deep-100);
    --sf-200: var(--deep-200);
    --sf-300: var(--deep-300);
    --tx-strong: var(--brand-white);
    --tx-50: var(--ink-50);
    --tx-100: var(--ink-100);
    --tx-200: var(--ink-200);
    --tx-300: var(--ink-300);
    --tx-400: var(--ink-400);
    --tx-500: var(--ink-500);
    --tx-600: var(--ink-600);
    --tx-700: var(--ink-700);
    --tx-800: var(--ink-800);
    --ac-50: var(--blue-50);
    --ac-100: var(--blue-100);
    --ac-200: var(--blue-200);
    --ac-300: var(--blue-300);
    --ac-400: var(--blue-400);
    --st-red: #F87171;
    --st-red-soft: #FCA5A5;
    --st-red-pale: #FECACA;
    --st-green: #4ADE80;
    --st-green-soft: #86EFAC;
    --st-green-2: #34D399;
    --st-amber: #FBBF24;
    --st-amber-soft: #FCD34D;
    --shadow-card: 0 24px 50px -28px rgba(0, 0, 0, 0.55);
}

.bc-light,
:root[data-theme="light"] {
    color-scheme: light;
    --sf-page: #E8EDF3;
    --sf-band: #DFE5EE;
    --sf-cta: #D6E2F3;
    --sf-1: #F3F5F8;
    --sf-100: #E9EDF2;
    --sf-200: #D3DBE5;
    --sf-300: #BFCAD8;
    --tx-strong: #0B1220;
    --tx-50: #0B1220;
    --tx-100: #172033;
    --tx-200: #283345;
    --tx-300: #445067;
    --tx-400: #5B687D;
    --tx-500: #717D91;
    --tx-600: #8E99AB;
    --tx-700: #ADB7C5;
    --tx-800: #CBD3DD;
    --ac-50: #1E3A8A;
    --ac-100: #1E3A8A;
    --ac-200: #1D4ED8;
    --ac-300: #2563EB;
    --ac-400: #2563EB;
    --st-red: #DC2626;
    --st-red-soft: #B91C1C;
    --st-red-pale: #991B1B;
    --st-green: #16A34A;
    --st-green-soft: #15803D;
    --st-green-2: #047857;
    --st-amber: #B45309;
    --st-amber-soft: #92400E;
    --shadow-card: 0 24px 50px -30px rgba(11, 18, 32, 0.30);
}

/* Dark mode: light sections stay dark. */
:root[data-theme="dark"] .bc-light {
    color-scheme: dark;
    --sf-page: var(--brand-navy);
    --sf-band: var(--band-alt);
    --sf-cta: var(--band-cta);
    --sf-1: var(--surface-1);
    --sf-100: var(--deep-100);
    --sf-200: var(--deep-200);
    --sf-300: var(--deep-300);
    --tx-strong: var(--brand-white);
    --tx-50: var(--ink-50);
    --tx-100: var(--ink-100);
    --tx-200: var(--ink-200);
    --tx-300: var(--ink-300);
    --tx-400: var(--ink-400);
    --tx-500: var(--ink-500);
    --tx-600: var(--ink-600);
    --tx-700: var(--ink-700);
    --tx-800: var(--ink-800);
    --ac-50: var(--blue-50);
    --ac-100: var(--blue-100);
    --ac-200: var(--blue-200);
    --ac-300: var(--blue-300);
    --ac-400: var(--blue-400);
    --st-red: #F87171;
    --st-red-soft: #FCA5A5;
    --st-red-pale: #FECACA;
    --st-green: #4ADE80;
    --st-green-soft: #86EFAC;
    --st-green-2: #34D399;
    --st-amber: #FBBF24;
    --st-amber-soft: #FCD34D;
    --shadow-card: 0 24px 50px -28px rgba(0, 0, 0, 0.55);
}

/* Checkboxes and radio buttons keep the light, white-inside look in every
   mode (as on the original design), even where the page is dark. */
input[type="checkbox"],
input[type="radio"] {
    color-scheme: light;
}

/* Site roles built on the mode tokens. Re-declared on every light scope so
   they pick up that scope's values (a custom property is resolved where it
   is declared, then inherited as a fixed colour). */
:root,
.bc-light {
    --bg-dark: var(--sf-page);
    --bg-card: var(--sf-1);
    --bg-hover: var(--sf-100);
    --text-primary: var(--tx-50);
    --text-secondary: var(--tx-300);
    --border: var(--sf-200);
    --border-light: var(--sf-300);
}