/* ==========================================================================
   MedBil design tokens
   Transcribed verbatim from "MedBil Design System"/tokens/*.css.
   Do not edit values here — they are the design system's contract.
   ========================================================================== */

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

:root{
  /* --- Type faces ------------------------------------------------------- */
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* --- Teal: brand anchor is teal-600, sampled from the logo ------------- */
  --teal-50:#EDF7F9;--teal-100:#D3EDF3;--teal-200:#A9DCE7;--teal-300:#72C6D8;
  --teal-400:#38ABC2;--teal-500:#158FA6;--teal-600:#0A8BA1;--teal-700:#07707F;
  --teal-800:#065B69;--teal-900:#043F4A;--teal-950:#02272F;

  /* --- Orange: action only ---------------------------------------------- */
  --orange-50:#FFF4EC;--orange-100:#FEE5D3;--orange-200:#FDC7A3;--orange-300:#FBA469;
  --orange-400:#F98639;--orange-500:#F66A13;--orange-600:#E15C09;--orange-700:#B84806;
  --orange-800:#8E3705;--orange-900:#632603;

  /* --- Neutrals: cool, faintly teal-shifted. Clinical, not warm. -------- */
  --neutral-0:#FFFFFF;--neutral-25:#FAFCFC;--neutral-50:#F4F8F9;--neutral-100:#EAF0F2;
  --neutral-200:#DCE5E8;--neutral-300:#C3D0D5;--neutral-400:#98A9B0;--neutral-500:#6F8288;
  --neutral-600:#546A71;--neutral-700:#3B5158;--neutral-800:#25383E;--neutral-900:#14262B;
  --neutral-950:#0B181C;

  /* --- Status hues, deliberately desaturated ---------------------------- */
  --green-50:#E9F6F0;--green-500:#12855C;--green-700:#0B6144;
  --amber-50:#FDF6E4;--amber-500:#B47C04;--amber-700:#8A5E02;
  --red-50:#FDEDEB;--red-500:#CF3A2C;--red-700:#9E2A1F;

  /* --- Alphas ----------------------------------------------------------- */
  --teal-a04:rgba(10,139,161,.04);--teal-a08:rgba(10,139,161,.08);
  --teal-a16:rgba(10,139,161,.16);--teal-a32:rgba(10,139,161,.32);
  --orange-a12:rgba(246,106,19,.12);--orange-a24:rgba(246,106,19,.24);
  --ink-a06:rgba(20,38,43,.06);--ink-a10:rgba(20,38,43,.10);
  --ink-a56:rgba(20,38,43,.56);--ink-a72:rgba(20,38,43,.72);
  --white-a12:rgba(255,255,255,.12);--white-a48:rgba(255,255,255,.48);--white-a72:rgba(255,255,255,.72);

  /* --- Type scale: fractional values are the real measurements ---------- */
  --fs-display-1:59.6px;--lh-display-1:72px;--ls-display-1:-2.4px;
  --fs-display-2:50px;  --lh-display-2:60px; --ls-display-2:-1.92px;
  --fs-h2:47.8px;       --lh-h2:57.6px;      --ls-h2:-1.92px;
  --fs-h3:35.4px;       --lh-h3:43.2px;      --ls-h3:-.72px;
  --fs-h4:24px;         --lh-h4:33px;        --ls-h4:-.48px;
  --fs-h5:21.3px;       --lh-h5:29px;        --ls-h5:-.44px;
  --fs-lead:23.4px;     --lh-lead:33.84px;   --ls-lead:-.24px;
  --fs-body-lg:21.3px;  --lh-body-lg:33px;   --ls-body-lg:0px;
  --fs-body:18px;       --lh-body:28.8px;    --ls-body:0px;
  --fs-body-sm:17.7px;  --lh-body-sm:27px;   --ls-body-sm:0px;
  --fs-ui:16px;         --lh-ui:24px;        --ls-ui:0px;
  --fs-caption:14px;    --lh-caption:21px;   --ls-caption:0px;
  --fs-micro:12px;      --lh-micro:16.8px;   --ls-micro:.02em;
  --fs-eyebrow:14px;    --lh-eyebrow:16.8px; --ls-eyebrow:.12em;

  --fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;

  /* --- Spacing ---------------------------------------------------------- */
  --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:24px;--space-6:26px;--space-7:32px;--space-8:40px;--space-9:48px;
  --space-10:64px;--space-11:80px;--space-12:90px;--space-13:120px;--space-14:160px;

  /* The design system specifies containerBaseWidth 1280. Widened to 1400 at
     the client's request — the only token on this page that departs from the
     source collection. Padding and gutter are unchanged. */
  --container-max:1400px;--container-pad:80px;--container-pad-sm:24px;--gutter:16px;

  --section-y:90px;--section-y-tight:64px;--section-y-loose:120px;

  /* --- Radii ------------------------------------------------------------ */
  --radius-xs:5px;--radius-sm:6px;--radius-md:13.5px;--radius-lg:16px;
  --radius-xl:24px;--radius-2xl:32px;--radius-3xl:60px;--radius-pill:999px;
  --radius-button:57px;
  --border-hairline:1px;--border-medium:1.5px;--border-thick:2px;

  /* --- Elevation: ink-tinted, never neutral black ----------------------- */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(20,38,43,.06);
  --shadow-sm:0 2px 6px rgba(20,38,43,.06);
  --shadow-md:0 4px 16px rgba(20,38,43,.08);
  --shadow-lg:0 12px 32px rgba(20,38,43,.12);
  --shadow-xl:0 24px 56px rgba(20,38,43,.14);
  --shadow-cta:0 6px 18px rgba(246,106,19,.24);
  --ring-focus:0 0 0 3px rgba(10,139,161,.32);

  /* --- Motion ----------------------------------------------------------- */
  --dur-fast:120ms;--dur-base:180ms;--dur-slow:280ms;
  --ease-out:cubic-bezier(.2,.6,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --transition-hover:color var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);

  /* --- Semantic aliases: components reference ONLY these ---------------- */
  --surface-page:var(--neutral-0);
  --surface-muted:var(--neutral-50);
  --surface-card:var(--neutral-0);
  --surface-raised:var(--neutral-0);
  --surface-tint:var(--teal-50);
  --surface-accent-tint:var(--orange-50);
  --surface-inverse:var(--teal-900);
  --surface-inverse-deep:var(--teal-950);

  --text-heading:var(--neutral-900);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-faint:var(--neutral-400);
  --text-on-inverse:var(--neutral-0);
  --text-on-inverse-muted:rgba(255,255,255,.72);
  --text-brand:var(--teal-700);
  --text-accent:var(--orange-600);
  --text-link:var(--teal-700);
  --text-link-hover:var(--teal-800);

  --border-subtle:var(--neutral-100);
  --border-default:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --border-inverse:rgba(255,255,255,.16);
  --border-brand:var(--teal-600);

  --action-primary-bg:var(--orange-500);
  --action-primary-bg-hover:var(--orange-600);
  --action-primary-bg-active:var(--orange-700);
  --action-primary-fg:var(--neutral-0);
  --action-secondary-bg:var(--teal-700);
  --action-secondary-bg-hover:var(--teal-800);
  --action-secondary-fg:var(--neutral-0);
  --action-outline-fg:var(--teal-800);
  --action-outline-border:var(--teal-800);
  --action-outline-bg-hover:var(--teal-50);
  --action-quiet-fg:var(--teal-800);
  --action-quiet-bg-hover:var(--neutral-100);
  --action-disabled-bg:var(--neutral-200);
  --action-disabled-fg:var(--neutral-400);

  --status-success-fg:var(--green-700);--status-success-bg:var(--green-50);--status-success-dot:var(--green-500);
  --status-warning-fg:var(--amber-700);--status-warning-bg:var(--amber-50);--status-warning-dot:var(--amber-500);
  --status-danger-fg:var(--red-700);  --status-danger-bg:var(--red-50);    --status-danger-dot:var(--red-500);
  --status-info-fg:var(--teal-800);   --status-info-bg:var(--teal-50);     --status-info-dot:var(--teal-600);

  --focus-ring:var(--ring-focus);--focus-outline:var(--teal-600);
}