/* SSO design-system tokens — flattened from styles.css + tokens/*.css. Loaded BEFORE site.css. */

/* ---- tokens/fonts.css ---- */
/* SSO Hospitals webfonts.
   SUBSTITUTION NOTICE: no font binaries were supplied with the brand assets.
   Pairing set by the client: DM Serif Display carries all headings and display figures,
   Inter carries body, UI and every piece of supporting text, DM Sans carries labels and eyebrows.
   NOTE: DM Serif Display ships ONE weight (400) plus an italic. Never request 600/700 from it —
   the browser will synthesise a smeared faux-bold. Hierarchy comes from size, not weight.
   Replace the @import lines with local @font-face rules once real files arrive. */




:root{
  --font-sans:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-serif:"DM Serif Display","DM Serif Display Fallback",Georgia,"Times New Roman",serif;
  --font-display:"DM Serif Display","DM Serif Display Fallback",Georgia,"Times New Roman",serif;
  --font-label:"DM Sans","DM Sans Fallback",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:"DM Mono",ui-monospace,"SFMono-Regular",monospace;
}

/* ---- tokens/colors.css ---- */
/* Base palette. Brand hues are lifted verbatim from the SSO wordmark
   (assets/logo/sso-logo.svg). All five are co-primary — purple #4E0E96,
   blue #0E74AF, green #3EAC47, orange #D24A00, and the crimson gradient
   #E1556E -> #CE0035. Purple leads, but a purple-only page is off-brand.
   Neutral 300 (#CFD4DB) is the placeholder grey the live site itself ships. */
:root{
  /* Purple — brand lead */
  --purple-50:#f4efff;
  --purple-100:#e7dcfb;
  --purple-200:#cdb4f4;
  --purple-300:#ab84e8;
  --purple-400:#8654d3;
  --purple-500:#6a2cb6;
  --purple-600:#4e0e96;   /* wordmark bracket + "Hospitals" lockup */
  --purple-700:#4e1295;   /* wordmark first S */
  --purple-800:#3a0a71;
  --purple-900:#26064c;

  /* Deep purple for large dark fields — the brand hue at lower chroma, so a whole
     section reads purple without the saturation of purple-900. */
  --ink-700:#4a3a68;
  --ink-800:#3a2b53;
  --ink-900:#2e2145;

  /* Blue — wordmark second S */
  --blue-50:#eaf5fb;
  --blue-100:#cfe7f4;
  --blue-200:#9ccde8;
  --blue-300:#5aa9d1;
  --blue-500:#1585c3;
  --blue-600:#0d6fa8;
  --blue-700:#0a5988;

  /* Green — wordmark bracket, used for reassurance / confirmed states */
  --green-50:#edf9ee;
  --green-100:#d5f0d8;
  --green-200:#a8e0ae;
  --green-500:#3eac47;
  --green-600:#297a31;
  --green-700:#25702c;

  /* Orange — wordmark O */
  --orange-50:#fff2ea;
  --orange-100:#ffe0cd;
  --orange-200:#ffbe94;
  --orange-500:#ec5a06;
  --orange-600:#d24a00;
  --orange-700:#a63a00;

  /* Crimson — logo gradient, reserved for urgent / critical */
  --crimson-50:#fdeef1;
  --crimson-100:#fbd8de;
  --crimson-300:#e1556e;
  --crimson-600:#ce0035;
  --crimson-700:#a30029;

  /* Neutrals — cool grey, tuned to the site's own #CFD4DB */
  --neutral-0:#ffffff;
  --neutral-25:#fbfcfd;
  --neutral-50:#f6f7f9;
  --neutral-100:#eef0f4;
  --neutral-200:#e0e4ea;
  --neutral-300:#cfd4db;
  --neutral-400:#a5adb9;
  --neutral-450:#8d96a3;
  /* WCAG AA (4.5:1): neutral-500, green-600 and blue-600 were darkened the minimum needed for text on
     white and on the light tints they sit on (Lighthouse accessibility). Was #78818f / #31913a /
     #0e74af. Labels (eyebrows) moved off neutral-450, which stays for borders and icons only. */
  --neutral-500:#656c78;
  --neutral-600:#59616e;
  --neutral-700:#414852;
  --neutral-800:#2a2f37;
  --neutral-900:#171a1f;

  /* Warm surface — the paper tone behind long-form patient content */
  --sand-50:#fbf8f4;
  --sand-100:#f4ede4;
  --sand-200:#e8dccd;

  /* Brand gradient from the logo mark */
  --gradient-crimson:linear-gradient(90deg,#e1556e 0%,#ce0035 100%); /* @kind color */
  --gradient-purple:linear-gradient(135deg,#6a2cb6 0%,#4e0e96 100%); /* @kind color */
}

/* ---- tokens/typography.css ---- */
:root{
  /* Size ramp — 1.200 minor third above 18px body, tightened at small sizes */
  --text-3xs:11px;
  --text-2xs:12px;
  --text-xs:13px;
  --text-sm:15px;
  --text-base:17px;
  --text-md:19px;
  --text-lg:22px;
  --text-xl:26px;
  --text-2xl:31px;
  --text-3xl:38px;
  --text-4xl:46px;
  --text-5xl:56px;
  --text-6xl:68px;

  --leading-tight:1.08; /* @kind font */
  --leading-snug:1.2; /* @kind font */
  --leading-normal:1.4; /* @kind font */
  --leading-relaxed:1.6; /* @kind font */
  --leading-loose:1.75; /* @kind font */

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-extrabold:800;

  --tracking-tighter:-0.03em; /* @kind font */
  --tracking-tight:-0.015em; /* @kind font */
  --tracking-normal:0; /* @kind font */
  --tracking-wide:0.02em; /* @kind font */
  --tracking-caps:0.09em; /* @kind font */
}

/* ---- tokens/spacing.css ---- */
:root{
  /* 4px base grid; 5px and 10px steps exist because the site's cards use them */
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
  --space-11:80px;
  --space-12:96px;
  --space-13:128px;

  /* Layout */
  --container-max:1200px;
  --container-wide:1400px;
  --container-prose:680px;
  --gutter:24px;
  --gutter-lg:40px;
  --section-y:96px;
  --section-y-sm:56px;
}

/* ---- tokens/radius.css ---- */
:root{
  --radius-none:0px;
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-2xl:32px;
  --radius-pill:999px;
  --radius-circle:50%;

  --border-hairline:1px;
  --border-thick:2px;
}

/* ---- tokens/elevation.css ---- */
:root{
  /* Soft, low-contrast, cool-tinted. Nothing on this brand casts a hard shadow. */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(23,26,31,.05);
  --shadow-sm:0 1px 3px rgba(23,26,31,.06),0 1px 2px rgba(23,26,31,.04);
  --shadow-md:0 4px 12px rgba(23,26,31,.07);
  --shadow-lg:0 10px 28px rgba(23,26,31,.09);
  --shadow-xl:0 24px 56px rgba(23,26,31,.12);
  --shadow-purple:0 10px 28px rgba(78,14,150,.18);
  --shadow-inset-hairline:inset 0 0 0 1px var(--neutral-200);

  /* Protection gradient for text over photography */
  --scrim-bottom:linear-gradient(180deg,rgba(23,26,31,0) 0%,rgba(23,26,31,.72) 100%); /* @kind other */
  --scrim-left:linear-gradient(90deg,rgba(46,33,69,.86) 0%,rgba(46,33,69,.35) 55%,rgba(46,33,69,0) 100%); /* @kind other */

  --blur-glass:saturate(160%) blur(14px); /* @kind other */
}

/* ---- tokens/motion.css ---- */
:root{
  --duration-instant:80ms; /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:220ms; /* @kind other */
  --duration-slow:360ms; /* @kind other */
  --duration-slide:600ms; /* @kind other */

  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */

  --transition-base:all var(--duration-base) var(--ease-standard); /* @kind other */
  --press-scale:.98; /* @kind other */
}

/* ---- tokens/semantic.css ---- */
:root{
  /* Text */
  --text-heading:var(--neutral-900);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-faint:var(--neutral-400);
  --text-label:var(--neutral-500);
  --text-label-inverse:rgba(255,255,255,.55);
  --text-on-brand:var(--neutral-0);
  --text-link:var(--purple-600);
  --text-link-hover:var(--purple-800);

  /* Surfaces */
  --surface-page:var(--neutral-0);
  --surface-subtle:var(--neutral-50);
  --surface-card:var(--neutral-0);
  --surface-paper:var(--sand-50);
  --surface-brand:var(--purple-600);
  --surface-brand-soft:var(--purple-50);
  --surface-inverse:var(--ink-900);
  --surface-glass:rgba(255,255,255,.72);

  /* Borders */
  --border-subtle:var(--neutral-200);
  --border-default:var(--neutral-300);
  --border-strong:var(--neutral-400);
  --border-brand:var(--purple-600);

  /* Interactive — primary */
  --action-primary-bg:var(--purple-600);
  --action-primary-bg-hover:var(--purple-700);
  --action-primary-bg-active:var(--purple-800);
  --action-primary-fg:var(--neutral-0);

  /* Interactive — secondary (soft fill, no stroke) */
  --action-secondary-bg:var(--purple-50);
  --action-secondary-bg-hover:var(--purple-100);
  --action-secondary-fg:var(--purple-600);

  /* Interactive — WhatsApp consult, the site's second-most-used CTA */
  --action-whatsapp-bg:#25d366;
  --action-whatsapp-bg-hover:#1eb757;
  --action-whatsapp-fg:#ffffff;

  --focus-ring:0 0 0 2px var(--neutral-0),0 0 0 4px var(--purple-500);

  /* Status */
  --status-success-fg:var(--green-700);
  --status-success-bg:var(--green-50);
  --status-info-fg:var(--blue-700);
  --status-info-bg:var(--blue-50);
  --status-warn-fg:var(--orange-700);
  --status-warn-bg:var(--orange-50);
  --status-critical-fg:var(--crimson-700);
  --status-critical-bg:var(--crimson-50);

  /* Specialty accents — one hue per organ system, drawn from the wordmark */
  --specialty-head-neck:var(--purple-600);
  --specialty-gi:var(--orange-600);
  --specialty-thoracic:var(--blue-600);
  --specialty-hpb:var(--green-600);
  --specialty-uro-gynae:var(--purple-400);
  --specialty-breast:var(--crimson-600);

  /* Rating stars */
  --rating-star:#f5a623;

  /* Image placeholder — matches the live site's own placeholder fill */
  --image-placeholder:rgba(207,212,219,.35);
}

/* ---- tokens/base.css ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);color:var(--text-heading);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);font-weight:var(--weight-regular);text-wrap:balance}
h1{font-size:var(--text-5xl);line-height:var(--leading-tight);letter-spacing:-.012em}
h4{letter-spacing:var(--tracking-normal)}
h2{font-size:var(--text-3xl)}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-md)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Mouse users never see a ring: a click leaves :focus on the element in some engines,
   which reads as a stray blue-ish halo hanging off the pill after hover. */
button:focus:not(:focus-visible),a:focus:not(:focus-visible),[role="button"]:focus:not(:focus-visible){outline:none;box-shadow:none}
button::-moz-focus-inner{border:0;padding:0}
img{display:block;max-width:100%}
::selection{background:var(--purple-100);color:var(--purple-900)}