/* ============================================================
   Heron — Colors & Type
   One platform for every patient conversation.
   ============================================================ */


:root {
  /* ---------- BASE COLORS ---------------------------------- */

  /* Core neutrals */
  --heron-black: #141414;
  --heron-white: #FFFFFF;

  /* Blue scale — primary brand */
  --blue-50:  #DEDEFF;
  --blue-100: #B2B2FF;
  --blue-200: #8585FF;
  --blue-300: #5555FF;
  --blue-500: #0000FF;   /* primary */
  --blue-700: #0000A0;
  --blue-900: #00004E;

  /* Green scale — success / positive */
  --green-50:  #00FF80;
  --green-100: #00D268;
  --green-200: #00A651;
  --green-300: #007D3B;
  --green-500: #005627;
  --green-700: #003214;
  --green-900: #001505;

  /* Yellow scale — attention */
  --yellow-50:  #FFFF00;
  --yellow-100: #D5D500;
  --yellow-200: #ADAD00;
  --yellow-300: #868600;
  --yellow-500: #626200;
  --yellow-700: #3F3F00;
  --yellow-900: #202000;

  /* Pink scale — accent / urgent */
  --pink-50:  #FFECF0;
  --pink-100: #FFBFCF;
  --pink-200: #FF80A7;
  --pink-300: #FF00B0;
  --pink-500: #BD005D;
  --pink-700: #7F003C;
  --pink-900: #46001F;

  /* Neutral / grey scale */
  --grey-50:  #E0E0E2;
  --grey-100: #B8B8BD;
  --grey-200: #929299;
  --grey-300: #6D6D76;
  --grey-500: #4B4B54;
  --grey-700: #2B2B31;
  --grey-900: #111114;

  /* Brand guideline palettes (principal + secondary), used by the shape mosaic */
  --slate-700: #4E5774;
  --slate-400: #838BA3;
  --slate-200: #B9BED1;
  --mist:      #ECF1F7;
  --teal-500:  #12968A;
  --teal-200:  #7FE0D0;
  --orange-500:#FF5E1A;
  --orange-200:#FFB88C;
  --magenta-500:#E0399E;
  --magenta-200:#F7B8E0;

  /* ---------- SEMANTIC TOKENS ------------------------------ */

  /* Surfaces (light) */
  --surface-canvas:    var(--heron-white);
  --surface-raised:    var(--heron-white);
  --surface-sunken:    #F7F7F8;
  --surface-tint:      var(--blue-50);
  --surface-inverse:   var(--heron-black);

  /* Foreground / text */
  --fg-primary:        var(--heron-black);
  --fg-secondary:      var(--grey-500);
  --fg-tertiary:       var(--grey-300);
  --fg-disabled:       var(--grey-100);
  --fg-on-brand:       var(--heron-white);
  --fg-on-inverse:     var(--heron-white);
  --fg-link:           var(--blue-500);

  /* Brand */
  --brand-primary:        var(--blue-500);
  --brand-primary-hover:  var(--blue-700);
  --brand-primary-press:  var(--blue-900);
  --brand-tint:           var(--blue-50);

  /* Status */
  --status-success:    var(--green-200);
  --status-success-bg: #E6FAEF;
  --status-warning:    var(--yellow-300);
  --status-warning-bg: #FFFBE0;
  --status-danger:     var(--pink-500);
  --status-danger-bg:  var(--pink-50);
  --status-info:       var(--blue-500);
  --status-info-bg:    var(--blue-50);

  /* Borders */
  --border-subtle:     #ECECEE;
  --border-default:    var(--grey-50);
  --border-strong:     var(--grey-100);
  --border-focus:      var(--blue-500);

  /* ---------- TYPE FAMILIES --------------------------------
     Poppins for headings, numbers and quotes; Be Vietnam Pro for body/UI. */
  --font-brand:   var(--font-display);
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    var(--font-body);

  /* ---------- TYPE SCALE ----------------------------------- */
  --text-brand-xl:   500 96px/0.95 var(--font-brand);
  --text-brand-lg:   500 72px/1.00 var(--font-brand);
  --text-brand-md:   500 48px/1.05 var(--font-brand);

  --text-display-xl: 600 72px/1.05 var(--font-display);
  --text-display-lg: 600 56px/1.08 var(--font-display);
  --text-display-md: 600 44px/1.10 var(--font-display);

  --text-h1: 600 36px/1.15 var(--font-display);
  --text-h2: 600 28px/1.20 var(--font-display);
  --text-h3: 600 22px/1.25 var(--font-display);
  --text-h4: 600 18px/1.30 var(--font-display);

  --text-body-lg: 400 18px/1.55 var(--font-body);
  --text-body-md: 400 16px/1.55 var(--font-body);
  --text-body-sm: 400 14px/1.50 var(--font-body);
  --text-caption: 400 12px/1.40 var(--font-body);

  --text-label-lg: 500 16px/1.30 var(--font-body);
  --text-label-md: 500 14px/1.30 var(--font-body);
  --text-label-sm: 500 12px/1.30 var(--font-body);

  --text-mono: 400 14px/1.50 var(--font-mono);

  /* ---------- SPACING (4-pt) ------------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- RADII ---------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---------- SHADOWS / ELEVATION ------------------------- */
  --shadow-xs: 0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06), 0 1px 3px rgba(20, 20, 20, 0.04);
  --shadow-md: 0 4px 8px rgba(20, 20, 20, 0.06), 0 2px 4px rgba(20, 20, 20, 0.04);
  --shadow-lg: 0 12px 24px rgba(20, 20, 20, 0.08), 0 4px 8px rgba(20, 20, 20, 0.04);
  --shadow-xl: 0 24px 48px rgba(20, 20, 20, 0.12), 0 8px 16px rgba(20, 20, 20, 0.06);

  /* Brand-tinted glow used on primary CTAs and active focus */
  --shadow-brand: 0 8px 24px rgba(0, 0, 255, 0.20);
  --shadow-focus: 0 0 0 3px rgba(0, 0, 255, 0.18);

  /* ---------- MOTION --------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
}

/* ============================================================
   Type role utility classes — semantic, drop-in
   ============================================================ */
.t-brand-xl   { font: var(--text-brand-xl); letter-spacing: -0.01em; }
.t-brand-lg   { font: var(--text-brand-lg); letter-spacing: -0.01em; }
.t-brand-md   { font: var(--text-brand-md); letter-spacing: -0.005em; }
.t-display-xl { font: var(--text-display-xl); letter-spacing: -0.02em; }
.t-display-lg { font: var(--text-display-lg); letter-spacing: -0.02em; }
.t-display-md { font: var(--text-display-md); letter-spacing: -0.015em; }
.t-h1         { font: var(--text-h1); letter-spacing: -0.01em; }
.t-h2         { font: var(--text-h2); letter-spacing: -0.01em; }
.t-h3         { font: var(--text-h3); letter-spacing: -0.005em; }
.t-h4         { font: var(--text-h4); }
.t-body-lg    { font: var(--text-body-lg); }
.t-body-md    { font: var(--text-body-md); }
.t-body-sm    { font: var(--text-body-sm); }
.t-caption    { font: var(--text-caption); color: var(--fg-secondary); }
.t-label-lg   { font: var(--text-label-lg); }
.t-label-md   { font: var(--text-label-md); }
.t-label-sm   { font: var(--text-label-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.t-mono       { font: var(--text-mono); }