/* ============================================================
   Ascenix design tokens
   Transcribed 1:1 from "Healthcare DAS design spec/Ascenix
   Design System.dc.html" (v1.0). Do not invent values here —
   if a colour or size is needed and isn't below, add it to the
   design system first.
   ============================================================ */

:root {
  /* --- Brand: two blues ----------------------------------
     #0CC7ED is the true blue: buttons, CTAs, accents.
     #1C3F6E (28, 63, 110) is the navy: panels that carry text.
     Steps in between are tints and shades of those two, used in
     gradients and washes, not a third blue. */
  --cyan-50:  #E6F9FD;
  --cyan-100: #C5F3FB;
  --cyan-200: #8EE8F6;
  --cyan-300: #4CD8F1;
  --cyan-400: #1CCCEE;
  --cyan-500: #0CC7ED; /* PRIMARY */
  --cyan-600: #0CC7ED;
  --cyan-700: #0CC7ED;
  --cyan-800: #1C3F6E;
  --cyan-900: #1C3F6E;

  --brand: var(--cyan-500);
  --brand-deep: var(--cyan-900);

  /* --- Neutrals: cool slate ------------------------------ */
  --white:     #FFFFFF;
  --subtle:    #F8FAFC;
  --n-100:     #F2F4F7;
  --border:    #E4E7EC;
  --n-300:     #D0D5DD;
  --text-muted:#91949A;
  --text-2:    #667085;
  --text:      #475467;
  --text-strong:#1F2937;
  --ink:       #0B1220; /* headline + dark sections */

  /* --- Semantic ----------------------------------------- */
  --success:    #17B26A;
  --warning:    #F79009;
  --danger:     #F04438;
  --success-bg: #DCFAE6;
  --warning-bg: #FEF0C7;
  --danger-bg:  #FEE4E2;
  --info-bg:    var(--cyan-50);

  /* --- Data viz (multi-series only; cyan is the default) -- */
  --dv-emerald: #22C55E;
  --dv-amber:   #F59E0B;
  --dv-violet:  #8B5CF6;
  --dv-pink:    #EC4899;
  --dv-blue:    #0CC7ED;
  --dv-red:     #EF4444;

  /* --- Type --------------------------------------------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Spacing: 4px base -------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* --- Layout ------------------------------------------- */
  --maxw: 1200px;
  --gutter: 24px;
  --page-pad: 24px;
  --page-pad-lg: 64px;
  --section-y: 96px;

  /* --- Radius ------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* --- Elevation: a whisper, never heavy ----------------- */
  --sh-xs: 0 1px 2px rgba(11, 18, 32, .05);
  --sh-sm: 0 4px 12px rgba(11, 18, 32, .06);
  --sh-md: 0 10px 28px rgba(11, 18, 32, .08);
  --sh-lg: 0 24px 60px rgba(11, 18, 32, .10);
  --sh-glow: 0 10px 34px rgba(12, 199, 237, .14);

  /* --- Motion -------------------------------------------
     Spring measured off the Framer references:
     stiffness 195, damping 30, mass 1. Approximated as a
     cubic-bezier with a light overshoot. Travel is 24px, not
     the references' 150 — same curve, calmer, right for
     clinical software.                                      */
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: .18s;
  --dur: .55s;
  --dur-slow: .75s;
  --reveal-y: 24px;
}