/* ==========================================================================
   MediPurity LLP — Design Tokens
   Committed-blue brand strategy. Every repeated value lives here.
   Contrast note: --accent orange is for LARGE elements/buttons only.
   For orange text on white use --accent-ink (>=4.5:1).
   ========================================================================== */

:root {
  /* --- Brand color ramp (medical blue, committed) --- */
  --blue-900: #072a4a;
  --blue-800: #0a3a63;
  --blue-700: #0b5394;   /* primary brand */
  --blue-600: #1268b8;
  --blue-500: #1a73e8;   /* interactive / hover */
  --blue-400: #4d95ef;
  --blue-200: #b9d4f5;
  --blue-100: #dce9fb;
  --blue-050: #f4f8fc;   /* tinted surface */

  /* --- Accent (orange) --- */
  --accent:      #f2730c;  /* buttons, large badges, glows only */
  --accent-600:  #d4610a;  /* hover */
  --accent-ink:  #b5530a;  /* orange TEXT on white — passes 4.5:1 */
  --accent-050:  #fff3e9;  /* soft accent surface */

  /* --- Ink / neutrals --- */
  --ink-900: #0a1f33;   /* headings */
  --ink-700: #1c2a38;   /* strong body */
  --ink-600: #3f5266;   /* body */
  --ink-500: #5b6b7d;   /* secondary text (>=4.5:1 on white) */
  --line:    #e2e8f0;   /* borders */
  --line-2:  #edf2f7;

  /* --- Semantic surface roles --- */
  --bg:        #ffffff;
  --surface:   #f4f8fc;
  --surface-2: #eef4fb;
  --ink:       var(--ink-700);
  --muted:     var(--ink-500);
  --primary:   var(--blue-700);
  --primary-h: var(--blue-500);

  /* --- Success / error --- */
  --ok:    #0f8a5f;
  --ok-bg: #e6f6ef;
  --err:   #c62a2a;
  --err-bg:#fdecec;

  /* --- Typography --- */
  --font-head: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Fluid type scale (clamp max <= 6rem per display ceiling) */
  --fs-hero:  clamp(2.4rem, 1.5rem + 3.8vw, 4.25rem);
  --fs-h2:    clamp(1.9rem, 1.4rem + 1.9vw, 2.85rem);
  --fs-h3:    clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-lead:  clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:  1rem;
  --fs-sm:    0.9rem;
  --fs-xs:    0.8rem;

  /* --- Spacing scale (varied rhythm, not uniform) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

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

  /* --- Elevation --- */
  --sh-1: 0 1px 2px rgba(10, 31, 51, 0.04), 0 1px 3px rgba(10, 31, 51, 0.06);
  --sh-2: 0 4px 12px rgba(10, 31, 51, 0.06), 0 2px 4px rgba(10, 31, 51, 0.04);
  --sh-3: 0 12px 30px rgba(10, 31, 51, 0.10), 0 4px 8px rgba(10, 31, 51, 0.05);
  --sh-4: 0 24px 60px rgba(11, 83, 148, 0.16);
  --glow-accent: 0 8px 30px rgba(242, 115, 12, 0.28);

  /* --- Layout --- */
  --maxw: 1200px;
  --maxw-wide: 1360px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Motion --- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 620ms;

  /* --- Semantic z-index scale (never arbitrary 9999) --- */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}