/* =========================================================
   Guimbal WX — Public WWW Synced-Data Dashboard
   File: css/00-fonts-theme.css
   Version: V2-R33 Visual Correction Pass 45 - July 2026
   Copyright: © Andrew Tunnera 2025-2026. All rights reserved.
   Role: Active runtime file
   ========================================================= */

/* ========================== Fonts ========================== */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400;
  src:url("../fonts/Inter-Regular.woff2") format("woff2");
  font-display:swap;
}

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:600;
  src:url("../fonts/Inter-SemiBold.woff2") format("woff2");
  font-display:swap;
}

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:800;
  src:url("../fonts/Inter-ExtraBold.woff2") format("woff2");
  font-display:swap;
}
/* ========================== Design Tokens ========================== */
:root{
  color-scheme: dark light;

  --bg:#111315;
  --panel:#16181b;
  --panel-2:#111827;
  --ink:#f4f2ee;
  --muted:#a3aab4;
  --muted-2:#cbd5e1;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.24);
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 12px 26px rgba(0,0,0,.30);
  --shadow-soft:0 8px 18px rgba(0,0,0,.22);
  --ring:#e87979;
  --accent:#b91c1c;

  --blue:#0ea5e9;
  --blue-2:#3b82f6;
  --sky:#7dd3fc;
  --green:#22c55e;
  --teal:#14b8a6;
  --yellow:#facc15;
  --amber:#f59e0b;
  --orange:#fb923c;
  --red:#ef4444;
  --purple:#9333ea;
  --violet:#a855f7;

  /* Shared header glow */
  --bar-start:#0ea5e9;
  --bar-end:#facc15;
  --bar-sheen:rgba(255,255,255,.12);
  --glow-outer-a:rgba(14,165,233,.32);
  --glow-outer-b:rgba(250,204,21,.22);
  --dual-glow-md:0 0 14px 4px var(--glow-outer-a), 0 0 24px 8px var(--glow-outer-b);
  --dual-glow-sm:0 0 10px 3px var(--glow-outer-a), 0 0 18px 6px var(--glow-outer-b);

  /* Row chip styling used across the dash */
  --row-label-bg:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(15,20,26,.22);
  --row-value-bg:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02)),
    rgba(15,20,26,.42);
  --row-label-border:rgba(255,255,255,.105);
  --row-value-border:rgba(255,255,255,.16);

  /* Layout sizing */
  --gap:10px;
  --pad:8px;
  --title-pad-y:3px;
  --title-pad-x:10px;

  /* Bubbles panel stays deliberately taller */
  --stage-min-h:440px;
  --stage-h:52vh;
  --stage-max-h:680px;

  /* Instruments */
  --wind-card-h:262px;
  --ltg-card-h:262px;
  --wind-canvas:182px;
  --ltg-w:170px;
  --ltg-h:108px;
  --tube-card-h:130px;
  --tube-h:72px;
  --tube-w:22px;

  /* Hazards */
  --hz-red:#ef4444;
  --hz-amber:#f59e0b;
  --hz-yellow:#facc15;
  --hz-blue:#3b82f6;
  --hz-indigo:#6366f1;
  --hz-green:#22c55e;

  /* Moon pill sizing */
  --moon-pill-pad-y:.22rem;
  --moon-pill-pad-x:.60rem;
  --moon-pill-min-h:27px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f6f8;
    --panel:#ffffff;
    --panel-2:#f8fafc;
    --ink:#111827;
    --muted:#667085;
    --muted-2:#334155;
    --line:rgba(15,23,42,.12);
    --line-strong:rgba(15,23,42,.20);
    --shadow:0 10px 24px rgba(15,23,42,.12);
    --shadow-soft:0 6px 16px rgba(15,23,42,.10);
    --row-label-bg:linear-gradient(180deg, rgba(0,0,0,.035), rgba(0,0,0,.015)), rgba(255,255,255,.78);
    --row-value-bg:linear-gradient(180deg, rgba(0,0,0,.025), rgba(0,0,0,.01)), rgba(255,255,255,.86);
    --row-label-border:rgba(15,23,42,.10);
    --row-value-border:rgba(15,23,42,.14);
  }
}

/* ========================== R33.25/R33.26 Integrated Visual Uniformity Tokens ========================== */
:root{
  --wx-uniform-card-bg:
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.020)),
    rgba(10,16,24,.58);
  --wx-uniform-card-border:rgba(255,255,255,.155);
  --wx-uniform-card-shadow:
    inset 0 1px 0 rgba(255,255,255,.060),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 7px 18px rgba(0,0,0,.22);
  --wx-uniform-chip-bg:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(13,20,30,.62);
  --wx-uniform-chip-border:rgba(255,255,255,.165);
  --wx-uniform-chip-shadow:
    inset 0 1px 0 rgba(255,255,255,.060),
    0 3px 9px rgba(0,0,0,.20);
  --wx-uniform-radius:14px;
  --wx-uniform-radius-sm:11px;
}



/* ========================== R33.26 Unified Card Surface Tokens ========================== */
:root{
  --wx-surface-radius:16px;
  --wx-surface-radius-sm:12px;
  --wx-surface-border:rgba(255,255,255,.185);
  --wx-surface-border-strong:rgba(255,255,255,.235);
  --wx-surface-bg:
    radial-gradient(120% 110% at 50% -18%, rgba(125,211,252,.075), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.022)),
    rgba(9,15,23,.64);
  --wx-surface-bg-soft:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.020)),
    rgba(11,18,28,.58);
  --wx-surface-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 12px 26px rgba(0,0,0,.24),
    0 0 22px rgba(14,165,233,.055);
  --wx-surface-shadow-soft:
    inset 0 1px 0 rgba(255,255,255,.060),
    0 7px 18px rgba(0,0,0,.20);
  --wx-title-surface:
    linear-gradient(180deg, rgba(255,255,255,.080), rgba(255,255,255,.030)),
    rgba(9,16,25,.56);
  --wx-title-border:rgba(255,255,255,.18);
  --wx-instrument-shadow:
    inset 0 1px 0 rgba(255,255,255,.095),
    inset 0 -1px 0 rgba(0,0,0,.32),
    0 15px 34px rgba(0,0,0,.28),
    0 0 30px rgba(var(--wx-inst-a, 125,211,252), .13),
    0 0 38px rgba(var(--wx-inst-b, 34,197,94), .09);
  --wx-instrument-bg:
    radial-gradient(115% 105% at 50% -12%, rgba(var(--wx-inst-a, 125,211,252), .18), transparent 54%),
    radial-gradient(90% 95% at 100% 10%, rgba(var(--wx-inst-b, 34,197,94), .105), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(7,13,22,.78);
}

/* ========================== R33.30 Instrument Light/Ring Tokens ========================== */
:root{
  --wx-instrument-well-radius:18px;
  --wx-instrument-well-border:rgba(255,255,255,.145);
  --wx-instrument-well-bg:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.115), rgba(var(--wx-inst-a,125,211,252),.135) 31%, rgba(var(--wx-inst-b,34,197,94),.060) 52%, rgba(6,12,22,.18) 70%, transparent 78%);
  --wx-instrument-well-shadow:
    inset 0 1px 0 rgba(255,255,255,.070),
    inset 0 -16px 30px rgba(0,0,0,.16),
    0 0 22px rgba(var(--wx-inst-a,125,211,252),.115),
    0 0 34px rgba(var(--wx-inst-b,34,197,94),.070);
  --wx-instrument-well-ring:
    radial-gradient(circle at 50% 50%, transparent 57%, rgba(255,255,255,.080) 58%, transparent 60%),
    radial-gradient(circle at 50% 50%, transparent 70%, rgba(var(--wx-inst-a,125,211,252),.080) 71%, transparent 73%);
}


/* ========================== R33.30 Outer Panel Red Glow Tokens ========================== */
:root{
  --wx-outer-red-bg:
    radial-gradient(120% 100% at 50% -14%, rgba(239,68,68,.105), transparent 56%),
    radial-gradient(90% 80% at 100% 0%, rgba(185,28,28,.060), transparent 58%),
    var(--wx-surface-bg);
  --wx-outer-red-shadow:
    var(--wx-surface-shadow),
    0 0 18px rgba(239,68,68,.075),
    0 0 38px rgba(185,28,28,.060);
  --wx-instrument-red-bg:
    radial-gradient(115% 95% at 50% -12%, rgba(239,68,68,.090), transparent 54%),
    var(--wx-instrument-bg);
  --wx-instrument-red-shadow:
    var(--wx-instrument-shadow),
    0 0 18px rgba(239,68,68,.080),
    0 0 38px rgba(185,28,28,.055);
}




/* ========================== Borderless Diffused Panel Glow Tokens ========================== */
:root{
  --wx-header-diffuse-shadow:
    var(--shadow),
    0 0 26px rgba(14,165,233,.26),
    0 0 64px rgba(250,204,21,.16),
    0 18px 44px rgba(0,0,0,.20);
  --wx-stage-diffuse-shadow:
    var(--shadow),
    0 0 26px rgba(125,211,252,.24),
    0 0 64px rgba(34,197,94,.145),
    0 18px 44px rgba(0,0,0,.20);
  --wx-trends-panel-bg:
    radial-gradient(120% 100% at 50% -14%, rgba(56,189,248,.115), transparent 55%),
    radial-gradient(92% 85% at 100% 0%, rgba(250,204,21,.082), transparent 58%),
    var(--wx-surface-bg);
  --wx-trends-panel-shadow:
    var(--wx-surface-shadow),
    0 0 30px rgba(56,189,248,.20),
    0 0 68px rgba(250,204,21,.12);
  --wx-calc-panel-bg:
    radial-gradient(120% 100% at 50% -14%, rgba(34,197,94,.105), transparent 55%),
    radial-gradient(92% 85% at 100% 0%, rgba(14,165,233,.082), transparent 58%),
    var(--wx-surface-bg);
  --wx-calc-panel-shadow:
    var(--wx-surface-shadow),
    0 0 30px rgba(34,197,94,.18),
    0 0 68px rgba(14,165,233,.115);
  --wx-rain-panel-bg:
    radial-gradient(120% 100% at 50% -14%, rgba(56,189,248,.125), transparent 55%),
    radial-gradient(92% 85% at 100% 0%, rgba(14,165,233,.090), transparent 58%),
    var(--wx-surface-bg);
  --wx-rain-panel-shadow:
    var(--wx-surface-shadow),
    0 0 30px rgba(56,189,248,.21),
    0 0 68px rgba(14,165,233,.13);
}

/* ========================== R33.31 Lower Data-Card Uniformity Tokens ========================== */
:root{
  --wx-data-card-radius:13px;
  --wx-data-card-border:rgba(255,255,255,.185);
  --wx-data-card-bg:
    radial-gradient(110% 120% at 50% -22%, rgba(239,68,68,.050), transparent 50%),
    radial-gradient(90% 90% at 100% 0%, rgba(14,165,233,.050), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.066), rgba(255,255,255,.020)),
    rgba(8,14,23,.64);
  --wx-data-card-shadow:
    inset 0 1px 0 rgba(255,255,255,.070),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 8px 18px rgba(0,0,0,.22),
    0 0 18px rgba(239,68,68,.045);
  --wx-data-card-hover-shadow:
    inset 0 1px 0 rgba(255,255,255,.082),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 10px 22px rgba(0,0,0,.25),
    0 0 20px rgba(239,68,68,.070),
    0 0 18px rgba(14,165,233,.050);
  --wx-data-chip-radius:999px;
  --wx-data-chip-border:rgba(255,255,255,.18);
  --wx-data-chip-bg:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.026)),
    rgba(11,18,29,.64);
  --wx-data-chip-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    0 4px 10px rgba(0,0,0,.20);
  --wx-data-note-border:rgba(255,255,255,.18);
  --wx-data-note-bg:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.020)),
    rgba(8,14,23,.58);
}


/* ========================== R33 Drawer Polish Tokens ========================== */
:root{
  --wx-drawer-bg:
    radial-gradient(115% 95% at 12% -8%, rgba(239,68,68,.115), transparent 54%),
    radial-gradient(95% 85% at 100% 0%, rgba(14,165,233,.105), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.024)),
    rgba(8,13,22,.94);
  --wx-drawer-border:rgba(255,255,255,.20);
  --wx-drawer-shadow:
    inset 1px 0 0 rgba(255,255,255,.080),
    0 22px 54px rgba(0,0,0,.46),
    0 0 40px rgba(239,68,68,.090),
    0 0 44px rgba(14,165,233,.070);
  --wx-drawer-section-bg:
    radial-gradient(110% 95% at 50% -18%, rgba(255,255,255,.070), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.020)),
    rgba(9,16,26,.64);
  --wx-drawer-section-border:rgba(255,255,255,.165);
  --wx-drawer-control-bg:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(11,18,29,.68);
  --wx-drawer-control-border:rgba(255,255,255,.170);
}

/* ========================== R33.43 Uniform Visual System Tokens ==========================
   Shared glass/card rhythm adapted from the local home dashboard styling.
   CSS-only tokens; no data or behavior changes.
   ========================================================= */
:root{
  --wx43-glass-edge:
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 4px 12px rgba(0,0,0,.14);
  --wx43-panel-depth:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 10px 26px rgba(0,0,0,.23);
  --wx43-title-depth:
    inset 0 1px 0 rgba(255,255,255,.095),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 4px 12px rgba(0,0,0,.16);
  --wx43-chip-bg:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(125,211,252,.15), rgba(45,212,191,.075) 54%, rgba(129,140,248,.085)),
    rgba(15,23,42,.34);
  --wx43-title-bg:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.145), transparent 34%),
    linear-gradient(90deg, rgba(30,41,59,.44), rgba(15,23,42,.26)),
    rgba(15,23,42,.30);
  --wx43-card-bg:
    radial-gradient(120% 90% at 16% 0%, rgba(255,255,255,.060), transparent 50%),
    linear-gradient(180deg, rgba(15,23,42,.50), rgba(15,23,42,.26));
  --wx43-row-label-bg:
    linear-gradient(180deg, rgba(255,255,255,.044), rgba(255,255,255,.014)),
    rgba(15,20,26,.20);
  --wx43-row-value-bg:
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.020)),
    rgba(15,20,26,.34);
  --wx43-soft-text:rgba(236,248,255,.96);
  --wx43-muted-text:rgba(203,213,225,.82);
  --wx43-risk-neutral:linear-gradient(180deg, rgba(71,85,105,.56), rgba(51,65,85,.42));
  --wx43-risk-ok:linear-gradient(180deg, rgba(22,163,74,.54), rgba(21,128,61,.40));
  --wx43-risk-info:linear-gradient(180deg, rgba(37,99,235,.54), rgba(29,78,216,.40));
  --wx43-risk-caution:linear-gradient(180deg, rgba(202,138,4,.58), rgba(161,98,7,.42));
  --wx43-risk-warn:linear-gradient(180deg, rgba(234,88,12,.58), rgba(194,65,12,.44));
  --wx43-risk-danger:linear-gradient(180deg, rgba(220,38,38,.60), rgba(153,27,27,.46));
}

/* ========================== R33.44 Lower Panel Uniformity Tokens ========================== */
:root{
  --wx44-lower-panel-bg:
    radial-gradient(120% 95% at 50% -18%, rgba(var(--wx44-a,125,211,252),.115), transparent 56%),
    radial-gradient(90% 85% at 100% 0%, rgba(var(--wx44-b,34,197,94),.075), transparent 58%),
    var(--wx43-card-bg);
  --wx44-lower-panel-shadow:
    var(--wx43-panel-depth),
    0 0 24px rgba(var(--wx44-a,125,211,252),.120),
    0 0 46px rgba(var(--wx44-b,34,197,94),.070);
  --wx44-lower-body-bg:
    radial-gradient(120% 100% at 50% -18%, rgba(var(--wx44-a,125,211,252),.075), transparent 54%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016)),
    rgba(7,13,22,.58);
  --wx44-lower-body-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 8px 20px rgba(0,0,0,.21);
  --wx44-lower-item-bg:
    radial-gradient(110% 100% at 50% -22%, rgba(255,255,255,.055), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)),
    rgba(9,16,27,.52);
  --wx44-lower-item-shadow:
    inset 0 1px 0 rgba(255,255,255,.060),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 5px 14px rgba(0,0,0,.18),
    0 0 12px rgba(var(--wx44-a,125,211,252),.060);
  --wx44-lower-title-bg:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.145), transparent 34%),
    linear-gradient(90deg, rgba(var(--wx44-a,125,211,252),.180), rgba(15,23,42,.265)),
    rgba(15,23,42,.30);
  --wx44-lower-chip-bg:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.150), transparent 34%),
    linear-gradient(90deg, rgba(var(--wx44-a,125,211,252),.155), rgba(var(--wx44-b,34,197,94),.080)),
    rgba(15,23,42,.34);
  --wx44-lower-muted:rgba(203,213,225,.80);
}

/* ========================== R33.45 Visual Correction Tokens ========================== */
:root{
  --wx45-top-outline-opacity:.78;
  --wx45-top-outline-width:1.25px;
  --wx45-outline-blue-yellow:linear-gradient(90deg, rgba(14,165,233,.86), rgba(250,204,21,.74));
  --wx45-outline-yellow-blue:linear-gradient(90deg, rgba(250,204,21,.78), rgba(14,165,233,.80));
  --wx45-outline-blue-green:linear-gradient(90deg, rgba(14,165,233,.82), rgba(34,197,94,.70));
  --wx45-risk-neutral:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.13), transparent 36%),
    linear-gradient(135deg, rgba(148,163,184,.18), rgba(51,65,85,.18)),
    rgba(15,23,42,.22);
  --wx45-risk-ok:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.13), transparent 36%),
    linear-gradient(135deg, rgba(34,197,94,.24), rgba(20,184,166,.13)),
    rgba(6,78,59,.18);
  --wx45-risk-info:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.13), transparent 36%),
    linear-gradient(135deg, rgba(14,165,233,.24), rgba(59,130,246,.13)),
    rgba(15,23,42,.20);
  --wx45-risk-caution:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.13), transparent 36%),
    linear-gradient(135deg, rgba(250,204,21,.25), rgba(245,158,11,.13)),
    rgba(113,63,18,.16);
  --wx45-risk-warn:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.13), transparent 36%),
    linear-gradient(135deg, rgba(249,115,22,.25), rgba(245,158,11,.13)),
    rgba(124,45,18,.17);
  --wx45-risk-danger:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.13), transparent 36%),
    linear-gradient(135deg, rgba(239,68,68,.27), rgba(248,113,113,.13)),
    rgba(127,29,29,.18);
}