/* AQcredix — AURORA GLASS, the light theme (owner's choice, October 2026).
 *
 * The light theme used to be one flat white: page, sections and cards all near-white, so
 * nothing had depth, the 3D scenes floated on nothing, and the glass layer in
 * aq-glass-apply.css was invisible because there was no colour behind the glass. Aurora
 * puts soft fields of blue, violet and cyan behind the page, lets the glass show them,
 * and gives the brand a signature: a blue-to-violet gradient on the key word, the figures,
 * the navigation and the primary buttons.
 *
 * COLOUR ONLY. The aurora changes colours, surfaces and shadows — nothing else. Layout,
 * type, sizes and every behaviour (the hero following the mesh, button hovers, the theme
 * toggle and its prompts) are exactly as they were; tests/aurora-light.test.js holds that.
 *
 * LIGHT ONLY. Every rule is scoped to :root:not([data-theme="dark"]) — the boot snippet
 * sets data-theme="dark" for dark and neon and nothing for light — so the dark theme the
 * site opens in is untouched. Loaded last on every page, after aq-glass-apply.css.
 *
 * CONTRAST, MEASURED (WCAG AA = 4.5:1 for text, 3:1 for large text), against the ground
 * #F5F7FF and white cards:
 *   fg 17.4 · fg-muted 7.0 · fg-faint 5.3 · accent-text 6.2 · eyebrow 5.7
 *   ok 6.2 · warn 5.9 · nc 6.1 (status colours unchanged and still clear)
 *   white text on the button gradient: 5.1 → 4.8; on the nav gradient: 5.1 → 5.9
 *   the gradient on the headline word (large text): 4.8 → 4.0 → 3.4
 * The sample this was approved from ended the nav in sky-cyan #0EA5E9 (2.8:1 under white
 * text) and the headline in #06B6D4 (2.3:1); both were deepened to pass. Re-measure before
 * "brightening" any of them.
 *
 * Green, amber and red stay reserved for compliance status; the aurora uses none of them.
 */

:root:not([data-theme="dark"]) {
  --bg:#F5F7FF;
  --bg-elevated:#FFFFFF;
  --bg-deep:#F7F8FF;
  --bg-deep-2:#EEF1FF;
  --fg:#0B1030;
  --fg-muted:#4B5375;
  --fg-faint:#5D6588;
  --border:rgba(59,91,253,.24);       /* strong enough that an input on a white card is visible */
  --border-soft:rgba(59,91,253,.12);
  --surface-1:rgba(59,91,253,.04);
  --surface-2:rgba(59,91,253,.08);

  --brand:#2B3FD6;
  --brand-2:#3B5BFD;
  --brand-tint:rgba(59,91,253,.10);
  --accent:#2B3FD6;
  --accent-bright:#3B5BFD;
  --accent-solid:#3B5BFD;
  --accent-text:#2F49E0;
  --accent-bright-tint:rgba(59,91,253,.10);
  --hero-tint:#3B5BFD;
  --deep-accent:#3B5BFD;
  --border-strong:#8B5CF6;
  --brass:#5B47E0;            /* the eyebrow labels: violet-indigo, not olive */
  --info:#2F49E0;
  --info-tint:rgba(59,91,253,.12);

  /* Shadows carry the aurora's blue-violet rather than grey, so a lifted card looks lit
     by the same light as the page behind it. */
  --shadow-1:0 1px 2px rgba(30,40,120,.05), 0 18px 40px -22px rgba(59,91,253,.32);
  --shadow-2:0 4px 12px rgba(30,40,120,.06), 0 30px 60px -24px rgba(91,71,224,.40);

  --aurora-grad:linear-gradient(110deg,#3B5BFD,#7C4DFF);
  --aurora-text:linear-gradient(100deg,#3B5BFD,#8B5CF6 50%,#0891B2);
}

/* The glass material, retuned for a coloured ground: a lighter floor so the aurora shows
   through, a white edge and specular line that read as a pane catching light. */
:root[data-glass]:not([data-theme="dark"]) {
  --glass-floor:rgba(255,255,255,.70);
  --glass-film:rgba(124,92,255,.05);
  --glass-edge:rgba(255,255,255,.92);
  --glass-specular:rgba(255,255,255,.95);
  --glass-sat:140%;
  --glass-lift:0 1px 2px rgba(30,40,120,.05), 0 22px 50px -26px rgba(59,91,253,.40);
  --glass-lift-hover:0 2px 5px rgba(30,40,120,.06), 0 30px 60px -24px rgba(91,71,224,.45);
}

/* ---------- the aurora itself ----------
   A fixed layer, not a fixed background: background-attachment:fixed repaints the whole
   page on every scroll, which a hospital desktop feels. This sits under the motion canvas
   (.aq-bg, also fixed at z-index -1, later in the document) and above the page colour. */
:root:not([data-theme="dark"]) body::before {
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 88% -8%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(900px 640px at -8% 18%, rgba(0,190,255,.16), transparent 60%),
    radial-gradient(900px 700px at 55% 78%, rgba(59,91,253,.10), transparent 62%);
}

/* ---------- header ---------- */
:root:not([data-theme="dark"]) .site-header {
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,.8);
  box-shadow:0 1px 0 rgba(59,91,253,.08);
}
/* Desktop only. Below 980px .main-nav IS the phone drawer, which deliberately goes back to
   page colours (styles.css) — a gradient there would be a full-screen blue sheet. */
@media (min-width:981px) {
  :root:not([data-theme="dark"]) .main-nav {
    background:linear-gradient(115deg,#3B5BFD,#6C4DFF 60%,#0369A1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 12px 30px -12px rgba(76,77,255,.55);
  }
}
:root:not([data-theme="dark"]) .aq-search-btn,
:root:not([data-theme="dark"]) .aq-support-btn,
:root:not([data-theme="dark"]) .theme-toggle,
:root:not([data-theme="dark"]) .nav-toggle,
:root:not([data-theme="dark"]) #profileBtn {
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* ---------- buttons ---------- */
:root:not([data-theme="dark"]) .btn-accent,
:root:not([data-theme="dark"]) .btn-primary {
  background:var(--aurora-grad);
  color:#FFFFFF;
  box-shadow:0 14px 30px -12px rgba(91,77,255,.6);
}
/* Hover still darkens, as it did before the aurora: the gradient's two stops each take the
   same 16% of ink that styles.css mixes into the flat accent. */
:root:not([data-theme="dark"]) .btn-accent:hover,
:root:not([data-theme="dark"]) .btn-primary:hover {
  background:linear-gradient(110deg,color-mix(in srgb,#3B5BFD 84%,#0B1030),color-mix(in srgb,#7C4DFF 84%,#0B1030));
  color:#FFFFFF;
  box-shadow:0 18px 36px -12px rgba(91,77,255,.7);
}
:root:not([data-theme="dark"]) .btn-ghost,
:root:not([data-theme="dark"]) .btn-ghost-dark {
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-color:rgba(59,91,253,.2);
}

/* ---------- hero ----------
   THE HERO FOLLOWS THE MESH, AS IT ALWAYS HAS. brain.js and face.js set --hero-tint on
   .hero to the colour of the chapter under the cursor, and the hero button, the key word
   and the figures all take it (styles.css). The aurora keeps that rule: every gradient here
   STARTS at --hero-tint and only fades into the aurora's violet and cyan, so pointing at
   Care of Patients still turns them its colour. --hero-tint is a registered <color>
   (@property in styles.css), so it can be animated, and is — a gradient cannot transition
   on its own, but the colour inside it can. */
:root:not([data-theme="dark"]) .hero { transition:--hero-tint .6s ease; }
:root:not([data-theme="dark"]) .hero .btn-accent {
  background:linear-gradient(110deg,var(--hero-tint),color-mix(in srgb,var(--hero-tint) 55%,#7C4DFF));
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--hero-tint) 70%,transparent);
}
/* The split-text animation wraps each word in spans, so the gradient is clipped on every
   level; the small padding keeps the last italic letter from being cut by the clip. */
:root:not([data-theme="dark"]) .hero .em,
:root:not([data-theme="dark"]) .hero .em * {
  background:linear-gradient(100deg,var(--hero-tint),color-mix(in srgb,var(--hero-tint) 50%,#8B5CF6) 55%,color-mix(in srgb,var(--hero-tint) 55%,#0891B2));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
:root:not([data-theme="dark"]) .hero .em .aq-w,
:root:not([data-theme="dark"]) .hero .em .aq-w-i { padding-right:.1em; margin-right:-.06em; }
:root:not([data-theme="dark"]) .hero::after {
  background:radial-gradient(45% 55% at 80% 45%, rgba(139,92,246,.18), transparent 70%);
}
:root:not([data-theme="dark"]) .hero .n {
  background:linear-gradient(100deg,var(--hero-tint),color-mix(in srgb,var(--hero-tint) 55%,#8B5CF6));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* ---------- section labels ---------- */
:root:not([data-theme="dark"]) .eyebrow::before,
:root:not([data-theme="dark"]) .eyebrow.tag::before {
  background:linear-gradient(90deg,#3B5BFD,#0891B2);
}

/* ---------- feature tiles: glass over the aurora ---------- */
:root:not([data-theme="dark"]) .tile {
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 22px 50px -26px rgba(59,91,253,.40);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  :root:not([data-theme="dark"]) .tile {
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    backdrop-filter:blur(14px) saturate(1.4);
  }
}
:root:not([data-theme="dark"]) a.tile:hover {
  border-color:rgba(255,255,255,1);
  box-shadow:inset 0 1px 0 #FFFFFF, 0 30px 60px -24px rgba(91,71,224,.45);
}
:root:not([data-theme="dark"]) .tile .ico {
  background:linear-gradient(135deg,#3B5BFD,#8B5CF6);
  color:#FFFFFF;
  box-shadow:0 10px 20px -10px rgba(91,71,224,.7);
}

/* The call-to-action band picks up a whisper of the aurora instead of plain white. */
:root:not([data-theme="dark"]) .cta-band {
  background:linear-gradient(120deg,rgba(255,255,255,.75),rgba(238,233,255,.85) 60%,rgba(226,244,255,.85));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-1);
}

/* ---------- sign-in fields ----------
   The first thing a new hospital types into. On a white card the page-coloured field and
   a pale border all but disappeared, so these get a clearer edge and a focus ring in the
   aurora blue. */
:root:not([data-theme="dark"]) .aq-gate-box input,
:root:not([data-theme="dark"]) .ws-auth input {
  background:#F7F8FF;
  border-color:rgba(59,91,253,.32);
}
:root:not([data-theme="dark"]) .aq-gate-box input:focus,
:root:not([data-theme="dark"]) .ws-auth input:focus {
  background:#FFFFFF;
  border-color:#3B5BFD;
  box-shadow:0 0 0 3px rgba(59,91,253,.15);
  outline:none;
}

/* ---------- anything that floats over text stays nearly solid ----------
   Glass is for panels that sit on the aurora. A menu, a notice or a search box sits on top
   of other words, and translucency there lets the headline underneath read through the
   menu items. These keep the white edge and the lift, and drop most of the see-through. */
:root:not([data-theme="dark"]) .nav-dd-panel,
:root:not([data-theme="dark"]) .aq-notice-in,
:root:not([data-theme="dark"]) .aq-search-box,
:root:not([data-theme="dark"]) .aq-search-results,
:root:not([data-theme="dark"]) .aq-modal,
:root:not([data-theme="dark"]) .ws-modal-in,
:root:not([data-theme="dark"]) .aq-modal-overlay > div {
  background-color:rgba(255,255,255,.97);
  background-image:none;
}