/* Site-wide colour tokens for the public pages, with a light theme.
   theme.js sets <html data-theme="light|dark"> before first paint. */

:root {
    --color-bg: #050508;
    --color-bg-alt: #0a0a10;
    --color-surface: rgba(20, 20, 25, 0.8);
    --color-card: rgba(20, 20, 29, 0.9);
    --color-text: #ffffff;
    --color-heading: #ffffff;
    --color-text-muted: #a0a0b0;
    --color-accent: #6366f1;
    --color-accent-hover: #4f46e5;
    --color-link: #a5b4fc;
    --color-success: #34d399;
    --color-danger: #fb7185;
    --color-header: rgba(5, 5, 8, 0.95);
    --color-header-fade: rgba(5, 5, 8, 0.9);
    --color-header-clear: rgba(5, 5, 8, 0);
    --color-footer: #020203;
    --color-border: rgba(255, 255, 255, 0.05);
    --color-border-strong: rgba(255, 255, 255, 0.2);
    --color-wash: rgba(255, 255, 255, 0.05);
    --color-wash-strong: rgba(255, 255, 255, 0.1);
    --color-field: rgba(0, 0, 0, 0.3);
    --color-field-border: rgba(255, 255, 255, 0.18);
    --title-gradient: linear-gradient(to right, #fff, #a0a0b0);
    --logo-filter: none;
    color-scheme: dark;
}

:root[data-theme="light"] {
    --color-bg: #f7f7fb;
    --color-bg-alt: #eef0f7;
    --color-surface: rgba(255, 255, 255, 0.85);
    --color-card: #ffffff;
    --color-text: #14141f;
    --color-heading: #0b0b14;
    --color-text-muted: #55566a;
    --color-accent: #4f46e5;
    --color-accent-hover: #4338ca;
    --color-link: #4338ca;
    --color-success: #047857;
    --color-danger: #be123c;
    --color-header: rgba(247, 247, 251, 0.95);
    --color-header-fade: rgba(247, 247, 251, 0.9);
    --color-header-clear: rgba(247, 247, 251, 0);
    --color-footer: #e9ebf3;
    --color-border: rgba(20, 20, 40, 0.08);
    --color-border-strong: rgba(20, 20, 40, 0.22);
    --color-wash: rgba(20, 20, 40, 0.04);
    --color-wash-strong: rgba(20, 20, 40, 0.08);
    --color-field: #ffffff;
    --color-field-border: rgba(20, 20, 40, 0.2);
    --title-gradient: linear-gradient(to right, #0b0b14, #4b4c63);
    /* The logo is white text with a blue mark: flip it to dark text, keep the blue. */
    --logo-filter: invert(1) hue-rotate(180deg) saturate(1.4);
    color-scheme: light;

    /* Tokens used by the assurance app (assurance/app/assurance.css). */
    --bg-primary: #f7f7fb;
    --bg-secondary: #eef0f7;
    --bg-surface: #ffffff;
    --bg-elevated: #ffffff;
    --bg-hover: #e8eaf3;
    --bg-active: #dcdff0;
    --text-primary: #14141f;
    --text-secondary: #33344a;
    --text-muted: #55566a;
    --text-accent: #00669f;   /* Turner & Townsend light blue, deepened for text: 5.6:1 */
    --accent: #1e4479;        /* Turner & Townsend dark blue: white text 9.6:1 */
    --accent-bright: #163764;
    --accent-glow: #0090dc33;
    --brand-blue: #1e4479;
    --on-brand: #fff;
    --border-subtle: #14142817;
    --border-medium: #1414282e;
    --border-accent: #0090dc73;
    --success: #047857;
    --warning: #b45309;
    --danger: #be123c;
    --field-wash: #ffffff;
    --control-wash: #1414280a;
    --glass-bg: #f7f7fbeb;
    --modal-shadow: 0 18px 40px #14142833;
}

.logo img {
    filter: var(--logo-filter);
}

/* Theme toggle, injected into the header nav by theme.js */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

header nav .theme-toggle:hover,
.as-theme .theme-toggle:hover {
    color: var(--color-heading);
    border-color: var(--color-heading);
    background: var(--color-wash-strong);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Assurance app rules that hard-code dark colours */
:root[data-theme="light"] .as-top-tabs [aria-selected=true],
:root[data-theme="light"] .as-link:hover { color: var(--color-heading); }