/* =========================================================================
   ROSIE — Design tokens (dark theme)
   Palette source: design_system/HudPrimitives.jsx + 03-sim-training.html
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,700;0,9..144,900;1,9..144,700;1,9..144,900&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- Surfaces -------------------------------------------------------- */
  --bg:             #0A0F1A;              /* page / outermost */
  --app-nav:        #14233B;              /* global top header bar (navy) */
  --app-nav-2:      #1F3350;              /* header hover / raised navy */
  --surface:        #13203A;              /* card / panel */
  --surface-raised: rgba(255,255,255,0.03); /* inset inner section */
  --surface-hover:  rgba(255,255,255,0.05);

  /* ---- Borders --------------------------------------------------------- */
  --border:         rgba(255, 255, 255, 0.08);
  --border-emph:    rgba(255, 255, 255, 0.14);

  /* ---- Text ------------------------------------------------------------ */
  --text:           #E8EEF5;   /* primary */
  --text-dim:       #B5C2D2;   /* secondary */
  --text-muted:     #7A8CA3;   /* labels, muted */
  --text-faint:     #4D5F78;   /* very quiet */

  /* ---- Teal — primary interactive / success / low-alert --------------- */
  --teal:           #3CC5B4;
  --teal-dark:      #2A9D8F;
  --teal-soft:      rgba(60, 165, 154, 0.14);
  --teal-border:    rgba(60, 165, 154, 0.38);
  --teal-glow:      rgba(60, 165, 154, 0.35);

  /* Aliases so shared components reference --accent / --green cleanly */
  --accent:         var(--teal);
  --accent-dark:    var(--teal-dark);
  --accent-soft:    var(--teal-soft);
  --accent-border:  var(--teal-border);
  --accent-glow:    var(--teal-glow);
  --accent-light:   var(--teal-soft);
  --green:          var(--teal);
  --green-soft:     var(--teal-soft);

  /* ---- Blue — knowledge / info / customer speaker --------------------- */
  --blue:           #6FB1F0;
  --blue-dark:      #4A90E2;
  --blue-soft:      rgba(74, 144, 226, 0.16);
  --blue-border:    rgba(74, 144, 226, 0.32);

  /* ---- Coral — high alert / danger ------------------------------------ */
  --red:            #F97560;
  --red-dark:       #E06050;
  --red-soft:       rgba(249, 117, 96, 0.14);
  --red-border:     rgba(249, 117, 96, 0.38);

  /* ---- Amber — warning / score highlight ------------------------------ */
  --yellow:         #FFA94D;
  --yellow-soft:    rgba(255, 169, 77, 0.12);
  --yellow-border:  rgba(255, 169, 77, 0.32);

  /* ---- KSA semantic (Knowledge / Skill / Attitude) -------------------- */
  --ksa-k-bg:     rgba(74,  144, 226, 0.16); --ksa-k-text: #7FB3F2; --ksa-k-border: rgba(74,  144, 226, 0.32);
  --ksa-s-bg:     rgba(60,  165, 154, 0.16); --ksa-s-text: #3CC5B4; --ksa-s-border: rgba(60,  165, 154, 0.32);
  --ksa-a-bg:     rgba(255, 169,  77, 0.16); --ksa-a-text: #FFA94D; --ksa-a-border: rgba(255, 169,  77, 0.32);

  /* ---- Radii ----------------------------------------------------------- */
  --radius:      14px;
  --radius-sm:   10px;
  --radius-xs:    6px;
  --radius-pill: 100px;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow:    0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Motion ---------------------------------------------------------- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro:   120ms;
  --dur-comp:    240ms;
  --dur-page:    480ms;
}