/* =========================================================================
   Lotus Neuro — Colors & Type
   Single source of truth for color and typography tokens.
   --------------------------------------------------------------------------
   Brand palette derived from the supplied logos and Zoom backgrounds:
     Teal       #76ceb3   (primary accent — calm, restorative)
     Orange    #e8875f   (energy accent — used sparingly)
     Dark Green #1a2315  (deep, almost-black background — primary canvas)
     Cream      #eee2ce   (warm neutral — text on dark, secondary canvas)
   ========================================================================= */

/* --- Webfonts ----------------------------------------------------------- */
/* The Lotus Neuro custom display wordmark (logo) is bespoke geometric.
   For DISPLAY headlines we use the brand-supplied Cormorant Garamond — a
   high-contrast classical serif that pairs the geometric monoline wordmark
   with editorial gravitas (medical/clinical × considered & humane).
   For BODY / UI we use Inter as a clean, neutral sans pulled from Google
   Fonts (substitution — swap if Lotus Neuro has a licensed UI face).
   For tagline-style wide tracked all-caps we use Inter at heavier weights
   with letter-spacing applied. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inconsolata';
  src: url('fonts/Inconsolata-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-stretch: 50% 200%;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Kumbh Sans is the geometric display/UI sans (token --display). Served
   remotely here so it resolves in the design-system closure; self-host by
   adding an @font-face if/when the licensed file is uploaded. */
@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --ln-teal:        #76ceb3;
  --ln-teal-50:     #eaf6f1;
  --ln-teal-100:    #c8eadc;
  --ln-teal-200:    #a7decb;
  --ln-teal-300:    #76ceb3;  /* base */
  --ln-teal-500:    #4cae92;
  --ln-teal-700:    #2e7560;

  --ln-orange:      #e8875f;
  --ln-orange-50:   #fbe8de;
  --ln-orange-100:  #f6c8b1;
  --ln-orange-300:  #e8875f;  /* base */
  --ln-orange-500:  #c96a40;
  --ln-orange-700:  #884226;

  --ln-green:       #1a2315;  /* deep brand green / near-black */
  --ln-green-900:   #0d1209;
  --ln-green-800:   #131a0f;
  --ln-green-700:   #1a2315;  /* base */
  --ln-green-600:   #2a3823;
  --ln-green-500:   #3e5034;
  --ln-green-300:   #6f7f63;

  --ln-cream:       #eee2ce;
  --ln-cream-50:    #faf6ee;
  --ln-cream-100:   #f4ebd9;
  --ln-cream-300:   #eee2ce;  /* base */
  --ln-cream-500:   #d8c6a4;
  --ln-cream-700:   #a99875;

  /* ---------- SEMANTIC SURFACES ---------- */
  /* Defaults assume the canonical "dark" Lotus Neuro setting:
     deep green canvas with cream type and teal accents. */
  --ln-bg:          var(--ln-green);
  --ln-bg-elev:     var(--ln-green-600);
  --ln-bg-inverse:  var(--ln-cream);

  --ln-fg:          var(--ln-cream);   /* primary text on dark */
  --ln-fg-muted:    rgba(238, 226, 206, 0.72);
  --ln-fg-subtle:   rgba(238, 226, 206, 0.50);
  --ln-fg-inverse:  var(--ln-green);   /* primary text on cream */

  --ln-accent:      var(--ln-teal);    /* "calm" accent */
  --ln-accent-2:    var(--ln-orange);  /* "energy" accent */

  --ln-border:      rgba(238, 226, 206, 0.18);
  --ln-border-strong: rgba(238, 226, 206, 0.40);

  --ln-success:     var(--ln-teal);
  --ln-warning:     var(--ln-orange);
  --ln-danger:      #c96a40;

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --ln-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --ln-font-body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --ln-font-mono:    'Inconsolata', ui-monospace, 'SF Mono', Menlo, monospace;
  --ln-font-tagline: 'Inconsolata', 'Inter', 'Helvetica Neue', sans-serif;

  /* ---------- TYPE SCALE (modular, ~1.25 ratio) ---------- */
  --ln-text-xs:    12px;
  --ln-text-sm:    14px;
  --ln-text-base:  16px;
  --ln-text-md:    18px;
  --ln-text-lg:    22px;
  --ln-text-xl:    28px;
  --ln-text-2xl:   36px;
  --ln-text-3xl:   48px;
  --ln-text-4xl:   64px;
  --ln-text-5xl:   88px;
  --ln-text-6xl:   120px;

  /* ---------- LINE HEIGHTS ---------- */
  --ln-leading-tight:  1.05;
  --ln-leading-snug:   1.2;
  --ln-leading-normal: 1.5;
  --ln-leading-loose:  1.7;

  /* ---------- TRACKING ---------- */
  --ln-tracking-tight:   -0.02em;
  --ln-tracking-normal:  0;
  --ln-tracking-wide:    0.08em;
  --ln-tracking-tagline: 0.22em;  /* "WHERE BARRIERS FALL" */

  /* ---------- SPACING (4px base) ---------- */
  --ln-space-0:  0;
  --ln-space-1:  4px;
  --ln-space-2:  8px;
  --ln-space-3:  12px;
  --ln-space-4:  16px;
  --ln-space-5:  24px;
  --ln-space-6:  32px;
  --ln-space-7:  48px;
  --ln-space-8:  64px;
  --ln-space-9:  96px;
  --ln-space-10: 128px;

  /* ---------- RADII ---------- */
  --ln-radius-xs:  2px;
  --ln-radius-sm:  4px;
  --ln-radius-md:  8px;
  --ln-radius-lg:  16px;
  --ln-radius-xl:  24px;
  --ln-radius-pill: 999px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  /* Lotus Neuro's brand is matte and structural — shadows are gentle,
     not glossy. Use sparingly. */
  --ln-shadow-sm: 0 1px 2px rgba(13, 18, 9, 0.18);
  --ln-shadow-md: 0 4px 12px rgba(13, 18, 9, 0.22);
  --ln-shadow-lg: 0 12px 32px rgba(13, 18, 9, 0.30);

  /* ---------- BORDERS ---------- */
  --ln-border-width: 1px;
  --ln-border-width-thick: 2px;

  /* ---------- MOTION ---------- */
  --ln-ease:      cubic-bezier(0.2, 0.8, 0.2, 1);   /* @kind other */
  --ln-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */
  --ln-dur-fast:    140ms;   /* @kind other */
  --ln-dur-base:    220ms;   /* @kind other */
  --ln-dur-slow:    420ms;   /* @kind other */

  /* ---------- LAYOUT ---------- */
  --ln-content-max:  1200px;
  --ln-gutter:       max(20px, 4vw);   /* @kind spacing */
}

/* Light theme override — cream canvas, dark green type. */
[data-theme="light"] {
  --ln-bg:          var(--ln-cream);
  --ln-bg-elev:     #ffffff;
  --ln-bg-inverse:  var(--ln-green);
  --ln-fg:          var(--ln-green);
  --ln-fg-muted:    rgba(26, 35, 21, 0.70);
  --ln-fg-subtle:   rgba(26, 35, 21, 0.45);
  --ln-fg-inverse:  var(--ln-cream);
  --ln-border:      rgba(26, 35, 21, 0.16);
  --ln-border-strong: rgba(26, 35, 21, 0.40);
}

/* =========================================================================
   SEMANTIC TYPE STYLES
   Use these classes (or copy the rules) — body, headings, tagline, mono.
   ========================================================================= */

body {
  font-family: var(--ln-font-body);
  font-size: var(--ln-text-base);
  line-height: var(--ln-leading-normal);
  color: var(--ln-fg);
  background: var(--ln-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cormorant is a tall, high-contrast serif. It looks best at LARGE sizes
   and benefits from slightly tighter line-height and a touch of negative
   tracking. Use light weights (300–400) at display sizes, regular/medium
   for sub-display. Italic is gorgeous — use it for emphasis words. */
.ln-display, h1.ln-display {
  font-family: var(--ln-font-display);
  font-weight: 400;
  font-size: var(--ln-text-5xl);
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1, .ln-h1 {
  font-family: var(--ln-font-display);
  font-weight: 400;
  font-size: var(--ln-text-4xl);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h2, .ln-h2 {
  font-family: var(--ln-font-display);
  font-weight: 500;
  font-size: var(--ln-text-2xl);
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h3, .ln-h3 {
  font-family: var(--ln-font-display);
  font-weight: 500;
  font-size: var(--ln-text-xl);
  line-height: 1.2;
}
h4, .ln-h4 {
  font-family: var(--ln-font-body);  /* H4 drops to sans for hierarchy */
  font-weight: 600;
  font-size: var(--ln-text-lg);
  line-height: var(--ln-leading-snug);
  letter-spacing: -0.005em;
}

p, .ln-body {
  font-family: var(--ln-font-body);
  font-size: var(--ln-text-base);
  line-height: var(--ln-leading-normal);
  text-wrap: pretty;
}
.ln-body-lg { font-size: var(--ln-text-md); line-height: 1.55; }
.ln-body-sm { font-size: var(--ln-text-sm); line-height: 1.55; }

/* Eyebrow / kicker — small, tracked, all-caps. The brand tagline pattern. */
.ln-eyebrow,
.ln-tagline {
  font-family: var(--ln-font-tagline);
  font-weight: 500;
  font-size: var(--ln-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--ln-tracking-tagline);
  line-height: 1;
}
.ln-tagline { font-weight: 600; }

code, .ln-code {
  font-family: var(--ln-font-mono);
  font-size: 0.92em;
  background: rgba(118, 206, 179, 0.10);
  color: var(--ln-teal);
  padding: 0.1em 0.4em;
  border-radius: var(--ln-radius-sm);
}

/* Selection */
::selection {
  background: var(--ln-teal);
  color: var(--ln-green);
}