/* ======================================================================
   QueroCura legacy-monolith palette override
   ----------------------------------------------------------------------
   app/legacy/curasense_v7_monolith.py bakes its own dark-green /
   champagne design tokens directly into embedded <style> blocks (its own
   `:root{...}` custom properties, e.g. --g/--bg/--ink for most pages and
   a wholly separate --ivory/--forest/--em/--gold namespace for the
   /login + /register "luxury auth" page). Those embedded <style> blocks
   are printed by Python string-concatenation INSIDE the page HTML
   (some in <head>, the auth one at the top of <body>), so a normal
   `querocura_theme.css` link sitting only in <head> can lose the
   cascade tie-break on same-specificity rules to a <style> block that
   happens to be written later in the document (e.g. inside <body>).

   This file is injected by QueroCuraThemeInjectorMiddleware as the very
   LAST <style>/<link> in the document (right before </body>), so on any
   selector of equal specificity it always wins by load order, without
   needing !important. Where the monolith uses raw hardcoded hex instead
   of routing through its own custom properties (a handful of "hero"
   gradients + a few decorative accents on the auth left panel) we add
   !important overrides for those specific selectors only.

   Approach used, per selector group:
     1. Custom-property override (no !important needed — this file loads
        last) for every legacy `:root` token that drives page backgrounds,
        text, surfaces, borders and buttons across the pages that route
        through `shell()` (home, dashboard, chat, etc.) AND the separate
        auth-page token set used only by /login and /register.
     2. !important selector overrides for the small number of hardcoded
        (non-variable) hex values found on the landing hero
        (`.home-hero`, `.dash-hdr`) and the auth left panel / nav pill
        (`.auth-left`, `.auth-nav-pill`, `.auth-nav-btn`, `.btn-primary`)
        — these are the structural, highest-visual-impact elements that
        do not cascade from a custom property.
   ====================================================================== */

/* ---- 1a. Global monolith token namespace (home, dashboard, chat, etc.) ---- */
:root {
  /* Brand greens -> QueroCura teal/navy */
  --g: #0e8f83;      /* primary buttons, links, active accents */
  --gm: #0b6f66;     /* hover state of primary */
  --gl: #2f8fd1;      /* "light" accent, was a light green */
  --gd: #100e2a;      /* "dark" accent — was deep forest green, now navy */
  --gx: #0e8f83;
  --gp: #e6f6f4;      /* pale tint background */
  --gu: #d8f2ee;
  --gs: #bfe9e3;
  --g2: #7ee0d4;
  --g3: #2f8fd1;

  /* Champagne / warm neutrals -> QueroCura light surfaces */
  --champ: #f6f5f1;
  --champ2: #ebe9e2;
  --champ3: #ddd9cd;
  --gold: #e0a52c;
  --gold2: #f0cd7c;

  /* Ink / type -> QueroCura navy ink scale */
  --ink: #100e2a;
  --ink2: #34324a;
  --ink3: #46435f;
  --ink4: #6b6885;
  --ink5: #a9a6bd;

  /* Surfaces */
  --bg: #f6f5f1;
  --surf: #ffffff;
  --surf2: #ebe9e2;
  --surf3: #ebe9e2;

  /* Borders */
  --bdr: rgba(16, 14, 42, 0.16);
  --bdr2: rgba(16, 14, 42, 0.10);
  --bdr3: rgba(16, 14, 42, 0.06);

  /* Teal-tinted shadows, was green-tinted */
  --sg: 0 4px 20px rgba(14, 143, 131, .22), 0 1px 4px rgba(14, 143, 131, .12);
  --sg2: 0 8px 32px rgba(14, 143, 131, .30), 0 2px 8px rgba(14, 143, 131, .15);
  --sg3: 0 18px 50px rgba(14, 143, 131, .35), 0 5px 14px rgba(14, 143, 131, .18);
}

/* ---- 1b. Separate auth-page ("luxury" /login /register) token namespace ---- */
/* This block is printed by _auth_css() at the top of <body>, so it is
   guaranteed to appear earlier in the document than this override file
   (injected right before </body>); the redeclaration below wins the
   cascade tie-break on :root by load order. */
:root {
  --ivory: #f6f5f1;
  --ivory2: #ebe9e2;
  --ivory3: #ddd9cd;
  --parchment: #d7d3c4;
  --gold: #0e8f83;
  --gold-mid: #0b6f66;
  --gold-light: #7ee0d4;
  --gold-pale: #e6f6f4;
  --gold-glow: rgba(14, 143, 131, .16);
  --forest: #100e2a;
  --forest2: #1a1740;
  --em: #0e8f83;
  --em-bright: #7ee0d4;
  --em-pale: rgba(14, 143, 131, .14);
  --em-glow: rgba(14, 143, 131, .22);
}

/* ---- 2. Structural elements that use raw hex instead of the vars above ---- */

/* Landing-page hero (/) — big diagonal dark-green gradient background */
.home-hero {
  background:
    linear-gradient(160deg,
      #100e2a 0%,
      #171348 22%,
      #0e8f83 62%,
      #0b6f66 82%,
      #100e2a 100%) !important;
}
.home-hero::before {
  background:
    radial-gradient(ellipse 100% 80% at 60% -10%, rgba(126, 224, 212, .20) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 90% 80%, rgba(47, 143, 209, .14) 0%, transparent 55%),
    radial-gradient(ellipse 45% 55% at 5% 50%, rgba(14, 143, 131, .16) 0%, transparent 60%),
    radial-gradient(ellipse 35% 40% at 35% 90%, rgba(126, 224, 212, .10) 0%, transparent 55%) !important;
}

/* Dashboard header — same gradient treatment, kept consistent */
.dash-hdr {
  background:
    linear-gradient(148deg,
      #100e2a 0%,
      #171348 25%,
      #0e8f83 68%,
      #0b6f66 100%) !important;
}
.dash-hdr::before {
  background:
    radial-gradient(ellipse 80% 60% at 20% -20%, rgba(47, 143, 209, .16) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 90% 100%, rgba(126, 224, 212, .10) 0%, transparent 55%) !important;
}

/* /login /register left brand panel — hardcoded near-black-green gradient */
.auth-left {
  background:
    radial-gradient(ellipse 90% 55% at 95% 0%, rgba(14, 143, 131, .22) 0%, transparent 52%),
    radial-gradient(ellipse 65% 45% at 5% 100%, rgba(47, 143, 209, .16) 0%, transparent 52%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(14, 143, 131, .06) 0%, transparent 58%),
    linear-gradient(170deg, #100e2a 0%, #17143f 55%, #0d0c1f 100%) !important;
}
.auth-orb1 {
  background: radial-gradient(circle, rgba(14, 143, 131, .22), transparent 62%) !important;
}
.auth-orb2 {
  background: radial-gradient(circle, rgba(47, 143, 209, .18), transparent 60%) !important;
}
.auth-orb3 {
  background: radial-gradient(circle, rgba(14, 143, 131, .08), transparent 62%) !important;
}
.auth-nav-pill {
  background: rgba(16, 14, 42, .72) !important;
  border-color: rgba(14, 143, 131, .24) !important;
}
.auth-nav-btn {
  color: rgba(126, 224, 212, .55) !important;
}
.auth-nav-btn.active {
  background: linear-gradient(135deg, rgba(14, 143, 131, .28), rgba(14, 143, 131, .12)) !important;
  color: #7ee0d4 !important;
}
.auth-nav-btn:not(.active):hover {
  color: rgba(126, 224, 212, .85) !important;
}
.auth-brand-gem {
  background: linear-gradient(145deg, rgba(14, 143, 131, .24), rgba(47, 143, 209, .08)) !important;
  border-color: rgba(14, 143, 131, .34) !important;
  color: #7ee0d4 !important;
}

/* Sign-in / register submit button — hardcoded forest-green gradient */
.btn-primary {
  background: linear-gradient(148deg, #0e8f83 0%, #0b6f66 60%, #100e2a 100%) !important;
  box-shadow: 0 4px 20px rgba(14, 143, 131, .28),
              0 1px 0 rgba(255, 255, 255, .10) inset,
              0 -1px 0 rgba(0, 0, 0, .15) inset !important;
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(148deg, #0fa396 0%, #0d8a7d 60%, #100e2a 100%) !important;
  box-shadow: 0 6px 28px rgba(14, 143, 131, .36), 0 1px 0 rgba(255, 255, 255, .12) inset !important;
}
.btn-primary:active:not(:disabled) {
  box-shadow: 0 2px 12px rgba(14, 143, 131, .22) !important;
}

/* ======================================================================
   Additional legacy-monolith `:root` namespaces (second pass)
   ----------------------------------------------------------------------
   Four more pages each declare their own independent `:root{...}` token
   block inside their own embedded <style>. Located by grepping for
   `:root{` / `:root {` across curasense_v7_monolith.py (line numbers
   shift as the file is edited, so these are re-located by function/route
   rather than trusted line numbers):
     - profile_wizard()            /profile               (--sc/--st, per-step accent)
     - dashboard()                 /dashboard              (--bg/--s0../--em../--ink..)
     - symptom_analyser_result_page()  /symptom-analyser/result (--bg/--card/--ink/--green/--soft/--line)
     - curavault_insights_page()   /curavault/insights     (--bg/--card/--ink/--green/--soft/--line)
   Same approach: redeclare the `:root` custom properties (this file loads
   last, so no !important needed there), then add !important overrides
   for the selectors on each page that use raw hardcoded hex instead of
   their own vars for primary buttons, nav pills and badges.
   ====================================================================== */

/* ---- 3. /profile profile-wizard namespace ----
   The wizard recolors --sc (step accent) / --st (step tint) per step
   (red/teal/indigo/amber/green/purple/cyan/emerald) for step wayfinding.
   Flattened to the single QueroCura teal/tint pair for brand consistency
   with the rest of the app, same as every other page in this override. */
:root {
  --sc: #0e8f83;
  --st: #e6f6f4;
}
.pw-page {
  background-color: #f6f5f1 !important;
}
.pw-btn-next {
  background: #100e2a !important;
  box-shadow: 0 4px 0 #0a0919, 0 6px 20px rgba(16, 14, 42, .3) !important;
}
.pw-btn-next:hover:not(:disabled) {
  background: #1a1740 !important;
  box-shadow: 0 6px 0 #0a0919, 0 10px 24px rgba(16, 14, 42, .34) !important;
}
.pw-btn-next:active:not(:disabled) {
  box-shadow: 0 1px 0 #0a0919, 0 2px 8px rgba(16, 14, 42, .25) !important;
}

/* ---- 4. /dashboard namespace ----
   Fully var-routed in the source (no raw hardcoded hex on hero/cards/nav),
   so redeclaring the tokens is enough to retheme the whole page. */
:root {
  --bg: #f6f5f1;
  --s0: #ffffff;
  --s1: #f6f5f1;
  --s2: #ebe9e2;
  --s3: #ddd9cd;
  --border: rgba(16, 14, 42, .16);
  --border2: rgba(16, 14, 42, .10);
  --border3: rgba(16, 14, 42, .06);
  --em: #0e8f83;
  --em-mid: #0b6f66;
  --em-dim: rgba(14, 143, 131, .09);
  --em-glow: rgba(14, 143, 131, .2);
  --em-text: #0e8f83;
  --gold: #e0a52c;
  --gold-dim: rgba(224, 165, 44, .09);
  --ink: #100e2a;
  --ink2: rgba(16, 14, 42, .58);
  --ink3: rgba(16, 14, 42, .38);
  --ink4: rgba(16, 14, 42, .12);
}

/* ---- 5. /symptom-analyser/result namespace ----
   Token block covers backgrounds/ink; the "brand green" (#2f6339) used
   for the primary CTA, badges and progress bar is hardcoded raw hex on
   most selectors rather than routed through --green, so those need
   direct !important overrides too. */
:root {
  --bg: #f6f5f1;
  --card: #ffffff;
  --ink: #100e2a;
  --muted: #46435f;
  --green: #0e8f83;
  --soft: #e6f6f4;
  --line: #ddd9cd;
  --warn: #fdece7;
}
.governed {
  background: #e6f6f4 !important;
  color: #0b6f66 !important;
}
.urgency {
  border-color: #7ee0d4 !important;
  background: #e6f6f4 !important;
  color: #0b6f66 !important;
}
.bar > div {
  background: linear-gradient(90deg, #0e8f83, #7ee0d4) !important;
}
.conf-num {
  color: #0e8f83 !important;
}
.action-btn {
  background: #0e8f83 !important;
}
.action-btn.secondary {
  color: #0e8f83 !important;
}
.saved-note {
  color: #0e8f83 !important;
}

/* ---- 6. /curavault/insights namespace ----
   Same "brand green" (#2f6339) pattern hardcoded on the nav pills, year
   picker and CTA buttons instead of routed through --green. */
:root {
  --bg: #f6f5f1;
  --card: #ffffff;
  --ink: #100e2a;
  --muted: #46435f;
  --green: #0e8f83;
  --line: #ddd9cd;
  --soft: #e6f6f4;
}
.pill {
  color: #0e8f83 !important;
}
.pill.active {
  background: #0e8f83 !important;
  border-color: #0e8f83 !important;
}
.chip {
  background: #e6f6f4 !important;
  color: #0b6f66 !important;
}
.year-btn {
  color: #0e8f83 !important;
}
.year-btn.active {
  background: #0e8f83 !important;
}
.marker-value {
  color: #0e8f83 !important;
}
.action {
  background: #0e8f83 !important;
}
.action.secondary {
  background: #e6f6f4 !important;
  color: #0e8f83 !important;
}
