/* =========================================================================
   Orris Health — Foundations
   Color, typography & semantic tokens for the Orris Health brand.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand greens ---------- */
  --brand-spring-50:  #ECFDF3;
  --brand-spring-100: #D1FADF;
  --brand-spring-200: #A6F4C5;
  --brand-spring-300: #6CE9A6;
  --brand-spring-400: #32D583;
  --brand-spring-500: #12B76A;
  --brand-spring-600: #039855;
  --brand-spring-700: #027A48;
  --brand-spring-800: #05603A;
  --brand-spring-900: #054F31;

  --brand-forest-50:  #E8F1ED;
  --brand-forest-100: #C7DFD2;
  --brand-forest-200: #94BFA4;
  --brand-forest-300: #5B9974;
  --brand-forest-400: #2E7651;
  --brand-forest-500: #105838;
  --brand-forest-600: #0C4A2E;
  --brand-forest-700: #093C25;
  --brand-forest-800: #062E1C;
  --brand-forest-900: #03200F;

  --brand-primary:    var(--brand-spring-500);
  --brand-primary-hover: var(--brand-spring-600);
  --brand-primary-press: var(--brand-spring-700);
  --brand-deep:       var(--brand-forest-500);
  --brand-ink:        var(--brand-forest-900);

  /* ---------- Neutrals ---------- */
  --neutral-0:    #FFFFFF;
  --neutral-25:   #FCFDFC;
  --neutral-50:   #F7F9F8;
  --neutral-100:  #EEF2F0;
  --neutral-200:  #DCE3E0;
  --neutral-300:  #BCC7C2;
  --neutral-400:  #8C9994;
  --neutral-500:  #5F6B66;
  --neutral-600:  #434D49;
  --neutral-700:  #2F3835;
  --neutral-800:  #1F2624;
  --neutral-900:  #131816;

  /* ---------- Semantic UI colors ---------- */
  --critical-50:  #FEF3F2;
  --critical-100: #FEE4E2;
  --critical-300: #FDA29B;
  --critical-500: #F04438;
  --critical-700: #B42318;
  --critical-900: #7A271A;

  --warning-50:   #FFFAEB;
  --warning-100:  #FEF0C7;
  --warning-300:  #FEC84B;
  --warning-500:  #F79009;
  --warning-700:  #B54708;
  --warning-900:  #7A2E0E;

  --success-50:   var(--brand-spring-50);
  --success-500:  var(--brand-spring-500);
  --success-700:  var(--brand-spring-700);

  --info-50:   #EFF8FF;
  --info-100:  #D1E9FF;
  --info-300:  #84CAFF;
  --info-500:  #2E90FA;
  --info-700:  #175CD3;
  --info-900:  #194185;

  /* ---------- Foreground / surface aliases ---------- */
  --fg-1:       var(--brand-forest-900);
  --fg-2:       var(--neutral-700);
  --fg-3:       var(--neutral-500);
  --fg-4:       var(--neutral-400);
  --fg-on-brand: var(--neutral-0);
  --fg-link:    var(--brand-spring-700);

  --bg-app:     var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-sunken:  var(--neutral-100);
  --bg-tint:    var(--brand-spring-50);
  --bg-inverse: var(--brand-forest-900);
  --bg-overlay: rgba(6, 46, 28, 0.55);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--brand-spring-500);
  --border-focus:   var(--brand-spring-500);

  /* ---------- Type stacks ---------- */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

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

  /* ---------- Type scale ---------- */
  --fs-display-xl: 64px;  --lh-display-xl: 72px; --tk-display-xl: -0.025em;
  --fs-display-lg: 52px;  --lh-display-lg: 60px; --tk-display-lg: -0.024em;
  --fs-display:    40px;  --lh-display:    48px; --tk-display:    -0.022em;
  --fs-h1:         32px;  --lh-h1:         40px; --tk-h1:         -0.018em;
  --fs-h2:         26px;  --lh-h2:         34px; --tk-h2:         -0.014em;
  --fs-h3:         20px;  --lh-h3:         28px; --tk-h3:         -0.010em;
  --fs-h4:         17px;  --lh-h4:         24px; --tk-h4:         -0.005em;
  --fs-body-lg:    17px;  --lh-body-lg:    26px;
  --fs-body:       15px;  --lh-body:       22px;
  --fs-body-sm:    13px;  --lh-body-sm:    20px;
  --fs-caption:    12px;  --lh-caption:    16px;
  --fs-overline:   11px;  --lh-overline:   16px; --tk-overline:   0.10em;
  --fs-mono:       13px;  --lh-mono:       20px;

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

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

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(6, 46, 28, 0.05);
  --shadow-sm: 0 1px 3px rgba(6, 46, 28, 0.08), 0 1px 2px rgba(6, 46, 28, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(6, 46, 28, 0.10), 0 2px 4px -2px rgba(6, 46, 28, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(6, 46, 28, 0.10), 0 4px 6px -2px rgba(6, 46, 28, 0.05);
  --shadow-xl: 0 20px 24px -4px rgba(6, 46, 28, 0.12), 0 8px 8px -4px rgba(6, 46, 28, 0.06);
  --shadow-focus: 0 0 0 4px rgba(18, 183, 106, 0.18);
  --shadow-inset: inset 0 1px 2px rgba(6, 46, 28, 0.06);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --side-rail:     264px;
  --topbar-h:      60px;
}

/* =========================================================================
   Base reset
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--fg-1);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tk-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tk-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tk-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tk-h4); font-weight: var(--fw-semibold); }

p { margin: 0; color: var(--fg-2); }
a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--brand-spring-500); text-decoration: underline; text-underline-offset: 3px; }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
}

/* ---------- Utility type classes ---------- */
.t-display-xl { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tk-display-xl); }
.t-display-lg { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: var(--tk-display-lg); }
.t-display    { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display);    line-height: var(--lh-display);    letter-spacing: var(--tk-display); }
.t-h1         { font: var(--fw-display) var(--fs-h1)/var(--lh-h1) var(--font-display); letter-spacing: var(--tk-h1); }
.t-h2         { font: var(--fw-display) var(--fs-h2)/var(--lh-h2) var(--font-display); letter-spacing: var(--tk-h2); }
.t-h3         { font: var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-display); letter-spacing: var(--tk-h3); }
.t-h4         { font: var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-display); letter-spacing: var(--tk-h4); }
.t-body-lg    { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.t-body       { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-body-sm    { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--fg-2); }
.t-caption    { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }
.t-overline   { font-size: var(--fs-overline); line-height: var(--lh-overline); letter-spacing: var(--tk-overline); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--fg-3); }
.t-mono       { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); font-feature-settings: "tnum"; }
.t-tabular    { font-variant-numeric: tabular-nums; }