/* ============================================================
   The MV-Ed Project — Ventilator Simulator theme tokens
   Drop this into the simulator repo (e.g. /frontend/simulator-theme.css)
   and import it. It mirrors the main site's brand and adds a
   "ventilator screen" palette inspired by the site hero art.

   TWO-TIER AESTHETIC (important):
   • ATMOSPHERIC (hero-style) — use for framing only: the app header,
     the idle/splash state, panel chrome, section glows. Bloom, faint
     particle/grid backdrops OK here.
   • CLEAN CLINICAL — use for the LIVE waveform canvas + numeric
     readouts: dark navy screen, crisp glowing traces, subtle gridlines,
     minimal bloom. Legibility and 60fps beat atmosphere here.
   Rule of thumb: the moment a learner needs to READ a value or a
   waveform shape, favor clarity over glow.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap');

:root {
  /* --- Brand tokens (match the main site exactly) --- */
  --brand-primary-blue: #1565D8;
  --brand-deep-navy:    #0D1B2A;
  --brand-accent-blue:  #60A5FA;
  --brand-light-bg:     #F5F9FF;
  --brand-white:        #FFFFFF;
  --brand-text:         #1F2937;
  --brand-border:       #DCE7F5;
  --brand-muted:        #6B7280;
  --font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* --- Simulator "screen" tokens (the vent display) --- */
  --sim-screen-bg:      #070D18;   /* near-black navy, like the hero */
  --sim-screen-bg-2:    #0A1424;   /* slightly lighter, for gradients/vignette */
  --sim-grid-line:      rgba(96, 165, 250, 0.10); /* faint blue gridlines */
  --sim-grid-line-strong: rgba(96, 165, 250, 0.18); /* major gridlines */
  --sim-screen-text:    #C7D6EE;   /* soft light-blue label text on the screen */
  --sim-screen-text-dim:#7C8BA6;

  /* Waveform trace colors — channel-coded, legible on navy.
     Blue anchors the brand; green/amber distinguish channels the way
     real vent screens do. Swap if Daniel prefers a mono-blue look. */
  --trace-pressure: #FB7185;   /* airway pressure - rose */
  --trace-flow:     #22D3EE;   /* flow - cyan */
  --trace-volume:   #A3E635;   /* volume - lime */
  --trace-effort:   #A78BFA;   /* Pmus / effort overlay — violet */

  /* Glow (use sparingly on live traces; more freely on framing) --- */
  --glow-accent: 0 0 6px rgba(96, 165, 250, 0.55);
  --glow-soft:   0 0 12px rgba(96, 165, 250, 0.35);

  /* Alarm/status colors */
  --status-ok:    #34D399;
  --status-warn:  #FBBF24;
  --status-alarm: #F87171;

  --radius-md: 12px;
  --radius-lg: 16px;
}

/* --- App shell --------------------------------------------------- */
.sim-app {
  font-family: var(--font-body);
  color: var(--brand-text);
  background: var(--brand-light-bg); /* light chrome around the dark screen */
}
.sim-app h1, .sim-app h2, .sim-app h3 { font-family: var(--font-heading); color: var(--brand-deep-navy); }

/* --- The waveform SCREEN (clean-clinical tier) ------------------- */
.sim-screen {
  position: relative;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--sim-screen-bg-2), var(--sim-screen-bg) 70%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--sim-screen-text);
}
/* Subtle authentic gridlines behind the canvas (like a real vent screen).
   Put the <canvas> ABOVE this; keep lines faint so traces read clearly. */
.sim-screen .sim-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--sim-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sim-grid-line) 1px, transparent 1px);
  background-size: 40px 40px;   /* minor grid */
}
.sim-screen canvas { position: relative; display: block; width: 100%; height: 100%; }

/* Trace glow helper — apply to canvas via shadowBlur in JS OR to SVG
   strokes via filter. For CSS/SVG strokes: */
.trace-glow { filter: drop-shadow(0 0 3px currentColor); }

/* Screen labels / numeric readouts */
.sim-readout { font-family: var(--font-heading); color: var(--sim-screen-text); letter-spacing: .02em; }
.sim-readout .unit { color: var(--sim-screen-text-dim); font-weight: 500; }

/* --- Control panel (light, brand-clean) ------------------------- */
.sim-panel {
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  padding: 16px;
}

/* --- Buttons: reuse the site's pill style ----------------------- */
.sim-btn {
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: 10px 20px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
  background: var(--brand-primary-blue); color: #fff; transition: all .18s ease;
}
.sim-btn:hover { background: #0F4FB0; transform: translateY(-1px); }
.sim-btn.secondary { background: transparent; color: var(--brand-primary-blue); border-color: var(--brand-primary-blue); }

/* --- ATMOSPHERIC tier: optional hero-style splash/idle overlay ---
   Use ONLY on the idle/splash or header — NOT behind live waveforms. */
.sim-hero {
  background:
    radial-gradient(60% 80% at 50% 40%, rgba(96,165,250,0.18), transparent 70%),
    var(--sim-screen-bg);
  color: var(--brand-white);
}
.sim-hero .glow-title { text-shadow: var(--glow-soft); }

/* --- Disclaimer line (match the site) --------------------------- */
.sim-disclaimer { font-size: 12px; color: var(--brand-muted); }

/* ============================================================
   NOTES FOR THE BUILDER (Codex):
   • Draw waveforms on <canvas> for performance. Set the trace color
     from the --trace-* vars (read them in JS via getComputedStyle),
     and add a light glow with ctx.shadowBlur = 4; ctx.shadowColor =
     the trace color — keep it subtle so shapes stay crisp.
   • Keep the live screen in the "clean clinical" tier. Reserve the
     .sim-hero atmospheric styling for the splash/idle/header only.
   • Gridlines: put .sim-grid behind the canvas; don't draw heavy
     background art behind live traces.
   • Daniel may prefer a mono-blue trace palette — the --trace-* vars
     make that a one-line change.
   ============================================================ */