/*
 * OncoPharm theme: the ONLY file allowed to contain colour values or font names.
 * Everything else uses the semantic --op-* tokens (layer 2) or Bootstrap variables (layer 3).
 * Enforced by OncoPharm.Web.Tests/ThemeTokenTests.
 *
 *   Layer 1  Brand palette   raw values; purple and orange sampled from the OncoPharm logo
 *   Layer 2  Semantic tokens what things are (canvas, surface, nav-active...), per light/dark mode
 *   Layer 3  Bootstrap map   points Bootstrap 5.3 at the semantic tokens
 */

/* ---------- Font: Poppins (self-hosted, SIL OFL 1.1, see lib/poppins/LICENSE.txt) ---------- */

@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 400; src: url("../lib/poppins/poppins-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 500; src: url("../lib/poppins/poppins-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 600; src: url("../lib/poppins/poppins-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 700; src: url("../lib/poppins/poppins-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 400; src: url("../lib/poppins/poppins-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 500; src: url("../lib/poppins/poppins-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 600; src: url("../lib/poppins/poppins-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 700; src: url("../lib/poppins/poppins-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Layer 1: brand palette ---------- */

:root {
    /* Purple: logo #6B3089 = 600 */
    --op-purple-50:  #F6F1F9;
    --op-purple-100: #ECE2F2;
    --op-purple-200: #D7C2E4;
    --op-purple-300: #BC9AD2;
    --op-purple-400: #9C6DBA;
    --op-purple-500: #82479F;
    --op-purple-600: #6B3089;
    --op-purple-700: #5A2874;
    --op-purple-800: #47205C;
    --op-purple-900: #2E1540;

    /* Orange: logo #F29A20 = 500. Accent only; too low contrast for text on light surfaces. */
    --op-orange-50:  #FEF5E8;
    --op-orange-100: #FDE7C7;
    --op-orange-200: #FAD193;
    --op-orange-300: #F7B85C;
    --op-orange-400: #F5A73A;
    --op-orange-500: #F29A20;
    --op-orange-600: #D9820C;
    --op-orange-700: #B0690A;
    --op-orange-800: #85500A;

    /* Neutrals, slightly purple-tinted to sit with the logo */
    --op-neutral-0:   #FFFFFF;
    --op-neutral-25:  #FBFAFC;
    --op-neutral-50:  #F6F5F8;
    --op-neutral-100: #EEECF1;
    --op-neutral-200: #E3E0E8;
    --op-neutral-300: #CFCAD6;
    --op-neutral-400: #A9A2B3;
    --op-neutral-500: #827A8E;
    --op-neutral-600: #5F5869;
    --op-neutral-700: #45404D;
    --op-neutral-800: #2C2833;
    --op-neutral-850: #221F28;
    --op-neutral-900: #1A171F;
    --op-neutral-950: #121016;

    /* Status: only for meaning (up/down, success/failure) */
    --op-green-600: #2F8F5B;
    --op-green-300: #6FCB97;
    --op-red-600:   #C8414B;
    --op-red-300:   #F08A91;

    /* RGB triplets for Bootstrap's rgba(var(--bs-*-rgb), a) usage */
    --op-purple-600-rgb: 107, 48, 137;
    --op-purple-700-rgb: 90, 40, 116;
    --op-purple-300-rgb: 188, 154, 210;
    --op-purple-200-rgb: 215, 194, 228;
    --op-neutral-900-rgb: 26, 23, 31;
    --op-neutral-100-rgb: 238, 236, 241;
    --op-neutral-900-shadow: rgba(26, 23, 31, 0.05);

    /* Typography */
    --op-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Shape */
    --op-radius: 5px;
    --op-radius-sm: 3px;
}

/* ---------- Layer 2: semantic tokens ---------- */

:root,
[data-bs-theme="light"] {
    --op-canvas: var(--op-neutral-100);
    --op-surface: var(--op-neutral-25);
    --op-surface-raised: var(--op-neutral-0);
    --op-surface-muted: var(--op-neutral-50);
    --op-border: var(--op-neutral-200);
    --op-border-strong: var(--op-neutral-300);

    --op-text: var(--op-neutral-900);
    --op-text-muted: var(--op-neutral-600);
    --op-text-subtle: var(--op-neutral-500);
    --op-text-on-primary: var(--op-neutral-0);

    --op-primary: var(--op-purple-600);
    --op-primary-hover: var(--op-purple-700);
    --op-primary-subtle: var(--op-purple-50);
    --op-primary-text: var(--op-purple-600);
    --op-accent: var(--op-orange-500);

    --op-nav-text: var(--op-neutral-700);
    --op-nav-icon: var(--op-neutral-600);
    --op-nav-hover-bg: var(--op-neutral-50);
    --op-nav-active-bg: var(--op-purple-50);
    --op-nav-active-text: var(--op-purple-600);
    --op-nav-active-indicator: var(--op-orange-500);
    --op-nav-group-label: var(--op-neutral-500);

    --op-badge-bg: var(--op-orange-100);
    --op-badge-text: var(--op-orange-800);

    --op-toggle-bg: var(--op-neutral-50);
    --op-toggle-active-bg: var(--op-neutral-0);

    --op-positive: var(--op-green-600);
    --op-negative: var(--op-red-600);

    --op-logo-plate: var(--op-neutral-0);
    --op-glass-bg: rgba(238, 236, 241, 0.78);
    --op-shadow: 0 1px 2px var(--op-neutral-900-shadow), 0 6px 20px var(--op-neutral-900-shadow);
    --op-focus-border: var(--op-purple-400);
    --op-focus-ring: 0 0 0 0.2rem rgba(107, 48, 137, 0.3);
}

[data-bs-theme="dark"] {
    --op-canvas: var(--op-neutral-950);
    --op-surface: var(--op-neutral-900);
    --op-surface-raised: var(--op-neutral-850);
    --op-surface-muted: var(--op-neutral-800);
    --op-border: var(--op-neutral-800);
    --op-border-strong: var(--op-neutral-700);

    --op-text: var(--op-neutral-50);
    --op-text-muted: var(--op-neutral-400);
    --op-text-subtle: var(--op-neutral-500);
    --op-text-on-primary: var(--op-neutral-0);

    --op-primary: var(--op-purple-600);
    --op-primary-hover: var(--op-purple-500);
    --op-primary-subtle: rgba(188, 154, 210, 0.12);
    --op-primary-text: var(--op-purple-300);
    --op-accent: var(--op-orange-400);

    --op-nav-text: var(--op-neutral-300);
    --op-nav-icon: var(--op-neutral-400);
    --op-nav-hover-bg: var(--op-neutral-850);
    --op-nav-active-bg: rgba(188, 154, 210, 0.12);
    --op-nav-active-text: var(--op-purple-200);
    --op-nav-active-indicator: var(--op-orange-400);
    --op-nav-group-label: var(--op-neutral-500);

    --op-badge-bg: rgba(242, 154, 32, 0.18);
    --op-badge-text: var(--op-orange-300);

    --op-toggle-bg: var(--op-neutral-950);
    --op-toggle-active-bg: var(--op-neutral-800);

    --op-positive: var(--op-green-300);
    --op-negative: var(--op-red-300);

    /* The current logo is a JPEG with a white background, so it always sits on a white plate. */
    --op-logo-plate: var(--op-neutral-0);
    --op-glass-bg: rgba(18, 16, 22, 0.78);
    --op-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
    --op-focus-border: var(--op-purple-300);
    --op-focus-ring: 0 0 0 0.2rem rgba(188, 154, 210, 0.4);
}

/* ---------- Layer 3: Bootstrap 5.3 mapping ---------- */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-font-family: var(--op-font-sans);
    --bs-body-bg: var(--op-canvas);
    --bs-body-color: var(--op-text);
    --bs-emphasis-color: var(--op-text);
    --bs-secondary-color: var(--op-text-muted);
    --bs-tertiary-color: var(--op-text-subtle);
    --bs-secondary-bg: var(--op-surface-muted);
    --bs-tertiary-bg: var(--op-surface);
    --bs-border-color: var(--op-border);
    --bs-heading-color: var(--op-text);

    --bs-primary: var(--op-primary);
    --bs-primary-bg-subtle: var(--op-primary-subtle);
    --bs-primary-text-emphasis: var(--op-primary-text);
    --bs-primary-border-subtle: var(--op-border-strong);

    --bs-border-radius: var(--op-radius);
    --bs-border-radius-sm: var(--op-radius-sm);
    --bs-border-radius-lg: var(--op-radius);
    --bs-border-radius-xl: var(--op-radius);
    --bs-border-radius-xxl: var(--op-radius);

    --bs-box-shadow: var(--op-shadow);
    --bs-code-color: var(--op-primary-text);
    --bs-focus-ring-color: rgba(var(--op-purple-600-rgb), 0.3);
}

:root,
[data-bs-theme="light"] {
    --bs-primary-rgb: var(--op-purple-600-rgb);
    --bs-body-bg-rgb: var(--op-neutral-100-rgb);
    --bs-body-color-rgb: var(--op-neutral-900-rgb);
    --bs-link-color: var(--op-purple-600);
    --bs-link-color-rgb: var(--op-purple-600-rgb);
    --bs-link-hover-color: var(--op-purple-700);
    --bs-link-hover-color-rgb: var(--op-purple-700-rgb);
}

[data-bs-theme="dark"] {
    --bs-primary-rgb: var(--op-purple-600-rgb);
    --bs-body-bg-rgb: 18, 16, 22;
    --bs-body-color-rgb: 246, 245, 248;
    --bs-link-color: var(--op-purple-300);
    --bs-link-color-rgb: var(--op-purple-300-rgb);
    --bs-link-hover-color: var(--op-purple-200);
    --bs-link-hover-color-rgb: var(--op-purple-200-rgb);
    --bs-focus-ring-color: rgba(var(--op-purple-300-rgb), 0.4);
}

/* Bootstrap compiles component colours at build time, so the components we use are re-pointed here. */

.btn-primary {
    --bs-btn-color: var(--op-text-on-primary);
    --bs-btn-bg: var(--op-primary);
    --bs-btn-border-color: var(--op-primary);
    --bs-btn-hover-color: var(--op-text-on-primary);
    --bs-btn-hover-bg: var(--op-primary-hover);
    --bs-btn-hover-border-color: var(--op-primary-hover);
    --bs-btn-active-color: var(--op-text-on-primary);
    --bs-btn-active-bg: var(--op-primary-hover);
    --bs-btn-active-border-color: var(--op-primary-hover);
    --bs-btn-disabled-color: var(--op-text-on-primary);
    --bs-btn-disabled-bg: var(--op-primary);
    --bs-btn-disabled-border-color: var(--op-primary);
    --bs-btn-focus-shadow-rgb: var(--op-purple-600-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--op-primary-text);
    --bs-btn-border-color: var(--op-primary-text);
    --bs-btn-hover-color: var(--op-text-on-primary);
    --bs-btn-hover-bg: var(--op-primary);
    --bs-btn-hover-border-color: var(--op-primary);
    --bs-btn-active-color: var(--op-text-on-primary);
    --bs-btn-active-bg: var(--op-primary-hover);
    --bs-btn-active-border-color: var(--op-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--op-purple-600-rgb);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--op-focus-border);
    box-shadow: var(--op-focus-ring);
}

.form-check-input:checked {
    background-color: var(--op-primary);
    border-color: var(--op-primary);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--op-surface-raised);
    --bs-dropdown-border-color: var(--op-border);
    --bs-dropdown-link-color: var(--op-text);
    --bs-dropdown-link-hover-bg: var(--op-surface-muted);
    --bs-dropdown-link-hover-color: var(--op-text);
    --bs-dropdown-link-active-bg: var(--op-nav-active-bg);
    --bs-dropdown-link-active-color: var(--op-nav-active-text);
    --bs-dropdown-header-color: var(--op-text-subtle);
    --bs-dropdown-box-shadow: var(--op-shadow);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--op-primary);
    --bs-nav-pills-link-active-color: var(--op-text-on-primary);
}

.pagination {
    --bs-pagination-active-bg: var(--op-primary);
    --bs-pagination-active-border-color: var(--op-primary);
    --bs-pagination-color: var(--op-primary-text);
    --bs-pagination-hover-color: var(--op-primary-hover);
    --bs-pagination-focus-box-shadow: var(--op-focus-ring);
}

.tooltip {
    --bs-tooltip-bg: var(--op-neutral-900);
    --bs-tooltip-color: var(--op-neutral-0);
    --bs-tooltip-font-size: 0.8125rem;
}

.offcanvas,
.offcanvas-lg {
    --bs-offcanvas-bg: var(--op-canvas);
    --bs-offcanvas-color: var(--op-text);
}

.text-positive { color: var(--op-positive) !important; }
.text-negative { color: var(--op-negative) !important; }