/* =============================================================================
   HELIX DESIGN SYSTEM  —  Biology Learning Platform
   -----------------------------------------------------------------------------
   A presentation-only layer. It is loaded LAST on every page so it wins ties
   against the legacy Odoo bundle, Bootstrap, and per-page <style> blocks.

   It changes how the product LOOKS. It never changes what the product DOES:
   no markup contract, id, data-attribute, form name or JS hook depends on
   anything in this file.

   Sections
     01  Tokens (light)
     02  Tokens (dark)
     03  Base and typography
     04  Focus, selection, scrollbars
     05  Buttons
     06  Forms and controls
     07  Cards, panels and surfaces
     08  Tables
     09  Badges, chips and pills
     10  Alerts
     11  Modals, dialogs and dropdowns
     12  Tabs, accordions, list groups, pagination
     13  Progress and spinners
     14  Top navigation (upbar)
     15  Staff / admin shell
     16  Page hero
     17  Dashboards (student, parent, staff)
     18  Course and learning surfaces
     19  Auth surfaces
     20  Footer
     21  Motion, reveals and page transitions
     22  Skeletons and loading states
     23  Empty states
     24  Responsive and accessibility
   ========================================================================== */

/* =============================================================================
   01  TOKENS — LIGHT (default)
   ========================================================================== */

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

    /* --- Brand -------------------------------------------------------------
       Teal carries the existing brand equity and reads as "life science".
       Violet is the intelligence accent, used sparingly for AI-flavoured
       surfaces, focus glows and progress. Never both at full strength. */
    --hx-primary:            #0D9488;
    --hx-primary-strong:     #0F766E;
    --hx-primary-deep:       #115E59;
    --hx-primary-soft:       #E4F4F1;
    --hx-primary-softer:     #F1FAF8;
    --hx-primary-ring:       rgba(13, 148, 136, 0.28);
    --hx-on-primary:         #FFFFFF;

    /* The brand teal at full strength carries white text at only 3.74:1,
       which fails AA for body-sized labels. Anything that puts text ON the
       brand uses --hx-primary-solid instead (5.5:1); --hx-primary stays the
       identity colour for rules, icons, rings and fills that carry no text. */
    --hx-primary-solid:       #0F766E;
    --hx-primary-solid-hover: #115E59;

    /* Full-bleed brand sections pair the ground with hard-coded white text
       (`.bg-primary.text-white`), so the ground must stay dark in BOTH
       themes — a bright teal would leave white text at about 1.8:1. */
    --hx-primary-section:     #0F766E;

    --hx-accent:             #7C3AED;
    --hx-accent-strong:      #6D28D9;
    --hx-accent-soft:        #F1EAFE;
    --hx-accent-ring:        rgba(124, 58, 237, 0.26);
    --hx-on-accent:          #FFFFFF;

    --hx-cyan:               #0891B2;
    --hx-cyan-soft:          #E2F5FA;

    /* --- Semantic ---------------------------------------------------------- */
    /* Each semantic colour is also used as TEXT on its own soft tint (status
       chips and badges). Those pairings are the binding constraint, so the
       values below are tuned to clear 4.5:1 there — which also leaves white
       on the solid fill at 5.7:1 or better.
         success on success-soft  5.46:1     white on success  6.16:1
         danger  on danger-soft   5.02:1     white on danger   5.74:1
         warn    on warn-soft     5.59:1     white on warn     6.18:1 */
    --hx-success:            #15703A;
    --hx-success-soft:       #E6F5EB;
    --hx-success-ring:       rgba(21, 112, 58, 0.24);
    --hx-warn:               #A04708;
    --hx-warn-soft:          #FDF2E3;
    --hx-warn-ring:          rgba(160, 71, 8, 0.24);
    --hx-danger:             #C81E1E;
    --hx-danger-soft:        #FDECEC;
    --hx-danger-ring:        rgba(200, 30, 30, 0.24);
    --hx-info:               #0369A1;
    --hx-info-soft:          #E4F1FA;

    /* --- Neutrals / surfaces ---------------------------------------------- */
    --hx-bg:                 #F4F7F6;
    --hx-bg-tint:            radial-gradient(1200px 620px at 12% -8%, rgba(13, 148, 136, 0.07), transparent 62%),
                             radial-gradient(980px 520px at 92% 0%, rgba(124, 58, 237, 0.055), transparent 60%);
    --hx-surface:            #FFFFFF;
    --hx-surface-2:          #F7FAF9;
    --hx-surface-3:          #EEF3F2;
    --hx-surface-sunken:     #F0F4F3;
    --hx-surface-inverse:    #0B1F1C;

    --hx-ink:                #0B1F1C;
    --hx-ink-2:              #1B3833;
    --hx-muted:              #5C7671;
    --hx-muted-2:            #7A918D;
    --hx-on-inverse:         #EAF3F1;

    --hx-line:               rgba(11, 31, 28, 0.10);
    --hx-line-strong:        rgba(11, 31, 28, 0.17);
    --hx-line-faint:         rgba(11, 31, 28, 0.055);

    /* --- Elevation ---------------------------------------------------------
       Layered, low-opacity shadows. Elevation should read as light, never
       as a grey box sitting behind the card. */
    --hx-shadow-xs:   0 1px 2px rgba(11, 31, 28, 0.05);
    --hx-shadow-sm:   0 1px 2px rgba(11, 31, 28, 0.05), 0 2px 6px rgba(11, 31, 28, 0.04);
    --hx-shadow-md:   0 2px 4px rgba(11, 31, 28, 0.04), 0 8px 20px rgba(11, 31, 28, 0.07);
    --hx-shadow-lg:   0 4px 8px rgba(11, 31, 28, 0.05), 0 16px 40px rgba(11, 31, 28, 0.10);
    --hx-shadow-xl:   0 8px 16px rgba(11, 31, 28, 0.06), 0 28px 68px rgba(11, 31, 28, 0.14);
    --hx-shadow-glow: 0 0 0 1px var(--hx-primary-ring), 0 10px 32px rgba(13, 148, 136, 0.18);

    /* --- Radius ------------------------------------------------------------ */
    --hx-r-xs:   6px;
    --hx-r-sm:   9px;
    --hx-r-md:   12px;
    --hx-r-lg:   16px;
    --hx-r-xl:   22px;
    --hx-r-2xl:  28px;
    --hx-r-pill: 999px;

    /* --- Spacing (density 7 / standard-dense) ------------------------------ */
    --hx-s-1:  0.25rem;
    --hx-s-2:  0.5rem;
    --hx-s-3:  0.75rem;
    --hx-s-4:  1rem;
    --hx-s-5:  1.25rem;
    --hx-s-6:  1.5rem;
    --hx-s-8:  2rem;
    --hx-s-10: 2.5rem;
    --hx-s-14: 3.5rem;
    --hx-s-18: 4.5rem;

    /* --- Type -------------------------------------------------------------- */
    --hx-font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
    --hx-font-body:    "DM Sans", "Segoe UI", system-ui, -apple-system, "Open Sans", sans-serif;
    --hx-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --hx-t-xs:   0.75rem;
    --hx-t-sm:   0.8125rem;
    --hx-t-base: 0.9375rem;
    --hx-t-md:   1rem;
    --hx-t-lg:   1.125rem;
    --hx-t-xl:   1.375rem;
    --hx-t-2xl:  1.75rem;
    --hx-t-3xl:  2.25rem;
    --hx-t-4xl:  3rem;

    /* --- Motion ------------------------------------------------------------
       Fast enough to feel instant, slow enough to be readable. One easing
       curve for entrances, one for reversible state. */
    --hx-dur-instant: 90ms;
    --hx-dur-fast:    150ms;
    --hx-dur:         220ms;
    --hx-dur-slow:    380ms;
    --hx-ease:        cubic-bezier(0.22, 1, 0.36, 1);
    --hx-ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
    --hx-ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

    /* --- Layout ------------------------------------------------------------ */
    --hx-topbar-h: 3.75rem;
}

/* =============================================================================
   02  TOKENS — DARK
   -----------------------------------------------------------------------------
   Designed, not inverted. The dark palette sits on a deep teal-black so the
   brand still reads, surfaces step UP in luminance rather than down, and
   accents are lifted so they stay above 4.5:1 on dark ground.
   ========================================================================== */

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

    --hx-primary:            #2DD4BF;
    --hx-primary-strong:     #5EEAD4;
    --hx-primary-deep:       #99F6E4;
    --hx-primary-soft:       rgba(45, 212, 191, 0.14);
    --hx-primary-softer:     rgba(45, 212, 191, 0.08);
    --hx-primary-ring:       rgba(45, 212, 191, 0.34);
    --hx-on-primary:         #032B26;

    /* On dark ground the relationship inverts: the bright teal carries very
       dark text at roughly 12:1, so the solid token is the bright value. */
    --hx-primary-solid:       #2DD4BF;
    --hx-primary-solid-hover: #5EEAD4;
    --hx-primary-section:     #0B3F3A;

    --hx-accent:             #A78BFA;
    --hx-accent-strong:      #C4B5FD;
    --hx-accent-soft:        rgba(167, 139, 250, 0.16);
    --hx-accent-ring:        rgba(167, 139, 250, 0.34);
    --hx-on-accent:          #1E1240;

    --hx-cyan:               #38BDF8;
    --hx-cyan-soft:          rgba(56, 189, 248, 0.14);

    --hx-success:            #4ADE80;
    --hx-success-soft:       rgba(74, 222, 128, 0.14);
    --hx-success-ring:       rgba(74, 222, 128, 0.30);
    --hx-warn:               #FBBF24;
    --hx-warn-soft:          rgba(251, 191, 36, 0.14);
    --hx-warn-ring:          rgba(251, 191, 36, 0.30);
    --hx-danger:             #F87171;
    --hx-danger-soft:        rgba(248, 113, 113, 0.15);
    --hx-danger-ring:        rgba(248, 113, 113, 0.30);
    --hx-info:               #60A5FA;
    --hx-info-soft:          rgba(96, 165, 250, 0.14);

    --hx-bg:                 #070D0C;
    --hx-bg-tint:            radial-gradient(1200px 620px at 12% -8%, rgba(45, 212, 191, 0.10), transparent 62%),
                             radial-gradient(980px 520px at 92% 0%, rgba(167, 139, 250, 0.08), transparent 60%);
    --hx-surface:            #101A19;
    --hx-surface-2:          #162321;
    --hx-surface-3:          #1E2C2A;
    --hx-surface-sunken:     #0B1413;
    --hx-surface-inverse:    #EAF3F1;

    --hx-ink:                #E9F2F0;
    --hx-ink-2:              #CFDEDB;
    --hx-muted:              #93A8A4;
    --hx-muted-2:            #748A86;
    --hx-on-inverse:         #0B1F1C;

    --hx-line:               rgba(255, 255, 255, 0.095);
    --hx-line-strong:        rgba(255, 255, 255, 0.17);
    --hx-line-faint:         rgba(255, 255, 255, 0.055);

    --hx-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.50);
    --hx-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.34);
    --hx-shadow-md:   0 2px 6px rgba(0, 0, 0, 0.44), 0 10px 26px rgba(0, 0, 0, 0.42);
    --hx-shadow-lg:   0 6px 14px rgba(0, 0, 0, 0.48), 0 22px 52px rgba(0, 0, 0, 0.52);
    --hx-shadow-xl:   0 10px 22px rgba(0, 0, 0, 0.52), 0 36px 84px rgba(0, 0, 0, 0.62);
    --hx-shadow-glow: 0 0 0 1px var(--hx-primary-ring), 0 10px 34px rgba(45, 212, 191, 0.20);
}

/* Bootstrap variable bridge — makes every stock BS component inherit the
   Helix palette without touching a single class name in the markup. */
:root,
[data-theme] {
    --bs-primary:          var(--hx-primary);
    --bs-primary-rgb:      13, 148, 136;
    --bs-secondary:        var(--hx-muted);
    --bs-success:          var(--hx-success);
    --bs-danger:           var(--hx-danger);
    --bs-warning:          var(--hx-warn);
    --bs-info:             var(--hx-info);
    --bs-body-color:       var(--hx-ink-2);
    --bs-body-bg:          var(--hx-bg);
    --bs-border-color:     var(--hx-line);
    --bs-border-radius:    var(--hx-r-md);
    --bs-border-radius-sm: var(--hx-r-sm);
    --bs-border-radius-lg: var(--hx-r-lg);
    --bs-link-color:       var(--hx-primary-strong);
    --bs-link-hover-color: var(--hx-primary-deep);
    --bs-emphasis-color:   var(--hx-ink);
    --bs-heading-color:    var(--hx-ink);
    --bs-font-sans-serif:  var(--hx-font-body);
}

[data-theme="dark"] {
    --bs-primary-rgb: 45, 212, 191;
    --bs-link-color:  var(--hx-primary);
    --bs-link-hover-color: var(--hx-primary-strong);
}

/* =============================================================================
   03  BASE AND TYPOGRAPHY
   -----------------------------------------------------------------------------
   Space Grotesk sets headings and numerals (technical, confident, slightly
   geometric). DM Sans carries body copy at a comfortable reading rhythm.
   ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--hx-font-body);
    font-size: var(--hx-t-base);
    line-height: 1.6;
    color: var(--hx-ink-2);
    background-color: var(--hx-bg);
    background-image: var(--hx-bg-tint);
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
    transition: background-color var(--hx-dur) var(--hx-ease),
                color var(--hx-dur) var(--hx-ease);
}

/* The legacy theme paints several full-bleed white wrappers. Let the page
   background show through so the tinted ground is visible. */
#wrapwrap,
#wrap,
main,
.oe_website_login_container {
    background-color: transparent;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--hx-font-display);
    color: var(--hx-ink);
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.22;
    text-wrap: balance;
}

h1, .h1 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); }
h2, .h2 { font-size: clamp(1.4rem, 1.15rem + 1.05vw, 1.9rem); }
h3, .h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
h4, .h4 { font-size: 1.15rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; letter-spacing: 0.005em; }

.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    font-weight: 700;
    letter-spacing: -0.03em;
}

.display-1 { font-size: clamp(2.75rem, 1.9rem + 3.6vw, 4.5rem); }
.display-2 { font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); }
.display-4 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); }
.display-6 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.15rem); }

p {
    text-wrap: pretty;
}

/* --- Inverse contexts -----------------------------------------------------
   Giving every heading and .lead an explicit colour above would otherwise
   override the colour they are meant to INHERIT inside a filled section —
   e.g. `<section class="bg-primary text-white"><h2>` would render dark ink
   on teal. Inside any container that has already committed to light text,
   headings and body copy inherit it instead. */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6,
.text-white .h1, .text-white .h2, .text-white .h3,
.text-white .h4, .text-white .h5, .text-white .h6,
.text-white p, .text-white .lead, .text-white .display-1,
.text-white .display-2, .text-white .display-3, .text-white .display-4,
.text-white .display-5, .text-white .display-6,
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary p, .bg-primary .lead,
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark p, .bg-dark .lead,
.bg-black h1, .bg-black h2, .bg-black h3,
.bg-black h4, .bg-black h5, .bg-black h6,
.bg-black p, .bg-black .lead,
.o_cc3 .lead, .o_cc4 .lead, .o_cc5 .lead,
.page-hero .lead,
.sd-kpi h1, .sd-kpi h2, .sd-kpi h3, .sd-kpi h4, .sd-kpi h5, .sd-kpi h6,
.cp-kpi h1, .cp-kpi h2, .cp-kpi h3, .cp-kpi h4, .cp-kpi h5, .cp-kpi h6,
.stat-card h1, .stat-card h2, .stat-card h3,
.stat-card h4, .stat-card h5, .stat-card h6,
.sd-course-header h1, .sd-course-header h2, .sd-course-header h3,
.sd-course-header h4, .sd-course-header h5, .sd-course-header h6,
.practice-results-hero h1, .practice-results-hero h2, .practice-results-hero h3 {
    color: inherit;
}

.lead {
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
    line-height: 1.62;
    color: var(--hx-muted);
    font-weight: 400;
}

small, .small {
    font-size: var(--hx-t-sm);
    line-height: 1.5;
}

/* Numerals in a data context should be tabular so columns line up and
   counters do not jitter while they animate. */
.stat-number,
.sd-kpi__value,
.cp-kpi__value,
.hx-metric,
.staff-topbar__title,
td,
th {
    font-variant-numeric: tabular-nums;
}

.sd-kpi__value,
.cp-kpi__value,
.stat-number,
.hx-metric {
    font-family: var(--hx-font-display);
    letter-spacing: -0.02em;
}

a {
    color: var(--bs-link-color);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--hx-dur-fast) var(--hx-ease);
}

a:hover {
    color: var(--bs-link-hover-color);
}

hr,
.dropdown-divider {
    border-color: var(--hx-line);
    opacity: 1;
}

code, kbd, pre, samp {
    font-family: var(--hx-font-mono);
    font-size: 0.875em;
}

/* Text utility colours re-pointed at the token palette so every existing
   .text-muted / .text-primary in the markup adapts to the theme. */
.text-muted        { color: var(--hx-muted) !important; }
.text-primary      { color: var(--hx-primary-strong) !important; }
.text-success      { color: var(--hx-success) !important; }
.text-danger       { color: var(--hx-danger) !important; }
.text-warning      { color: var(--hx-warn) !important; }
.text-info         { color: var(--hx-info) !important; }
.text-secondary    { color: var(--hx-muted) !important; }
.text-body         { color: var(--hx-ink-2) !important; }
.text-dark         { color: var(--hx-ink) !important; }

[data-theme="dark"] .text-dark  { color: var(--hx-ink) !important; }
[data-theme="dark"] .text-black { color: var(--hx-ink) !important; }

.fw-semibold { font-weight: 600 !important; }
.fw-bold     { font-weight: 700 !important; }

/* =============================================================================
   04  FOCUS, SELECTION, SCROLLBARS
   ========================================================================== */

/* One focus treatment for the whole product: a two-tone ring that is visible
   on every surface in both themes. Never removed — only replaced. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--hx-primary);
    outline-offset: 2px;
    border-radius: var(--hx-r-xs);
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--hx-primary);
    outline-offset: 2px;
}

::selection {
    background: var(--hx-primary-ring);
    color: var(--hx-ink);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--hx-line-strong) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--hx-line-strong);
    border-radius: var(--hx-r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--hx-muted-2);
    background-clip: content-box;
}