/* Clinically Happy — Colors & Type
 * Single source of truth for the design system.
 * Imported by every preview card and UI kit.
 */

/* ---------- Webfont ---------- */
/* Montserrat is the SOLE web typeface (LouisianaW00 is logo-only, never typed).
 * Self-hosted from fonts/ — brand-licensed TTF files. */
@font-face { font-family: "Montserrat"; font-weight: 100; font-style: normal;  src: url("fonts/Montserrat-Thin.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 100; font-style: italic;  src: url("fonts/Montserrat-ThinItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 200; font-style: normal;  src: url("fonts/Montserrat-ExtraLight.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 200; font-style: italic;  src: url("fonts/Montserrat-ExtraLightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal;  src: url("fonts/Montserrat-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 300; font-style: italic;  src: url("fonts/Montserrat-LightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal;  src: url("fonts/Montserrat-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: italic;  src: url("fonts/Montserrat-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal;  src: url("fonts/Montserrat-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: italic;  src: url("fonts/Montserrat-MediumItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal;  src: url("fonts/Montserrat-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: italic;  src: url("fonts/Montserrat-SemiBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal;  src: url("fonts/Montserrat-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: italic;  src: url("fonts/Montserrat-BoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal;  src: url("fonts/Montserrat-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: italic;  src: url("fonts/Montserrat-ExtraBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 900; font-style: normal;  src: url("fonts/Montserrat-Black.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 900; font-style: italic;  src: url("fonts/Montserrat-BlackItalic.ttf") format("truetype"); font-display: swap; }

:root {
  /* ---------- Brand colors (raw) ---------- */
  /* Warm surfaces (light backgrounds) */
  --ch-cream:        #FDFBF6;   /* cream — softest warm white */
  --ch-paper:        #FFFFFF;   /* paper — pure white card surface */
  --ch-sand:         #F6F2EA;   /* sand — page background, mid warm */
  --ch-shell:        #EAE4D6;   /* shell — deepest warm surface, callouts */

  /* Ink (text + deep backgrounds) */
  --ch-ink-300:      #A9A299;   /* low-emphasis text, captions on light */
  --ch-ink-500:      #53504A;   /* body text */
  --ch-ink-700:      #2A2825;   /* headings */
  --ch-ink-900:      #14130F;   /* darkest text + deep dark surfaces */

  /* Teal scale — mint → forest */
  --ch-teal-50:      #EDFAF9;
  --ch-teal-100:     #D4F3F0;
  --ch-teal-200:     #AAE6E0;
  --ch-teal-300:     #7FD6CF;   /* secondary mint accent */
  --ch-teal-400:     #50C2BA;   /* ★ primary brand teal */
  --ch-teal-500:     #36A8A0;
  --ch-teal-600:     #2A8882;
  --ch-teal-700:     #226B67;
  --ch-teal-800:     #1B544F;   /* legacy forest green — CTA dark */
  --ch-teal-900:     #13403C;   /* deepest forest, footer extreme */

  /* ---------- Legacy aliases (preserve old token names) ---------- */
  --ch-mint:         var(--ch-teal-300);
  --ch-mint-soft:    var(--ch-teal-200);
  --ch-mint-deep:    var(--ch-teal-500);
  --ch-cream-soft:   var(--ch-cream);
  --ch-green:        var(--ch-teal-800);
  --ch-green-deep:   var(--ch-teal-900);
  --ch-green-darkest:#0E2D2A;
  --ch-white:        var(--ch-paper);
  --ch-ink:          var(--ch-ink-900);
  --ch-ink-2:        var(--ch-ink-700);
  --ch-muted:        var(--ch-ink-500);
  --ch-gray:         var(--ch-ink-300);
  --ch-gray-soft:    #C9C7BF;
  --ch-shadow-rgb:   27, 84, 79;

  /* ---------- Semantic surface tokens ---------- */
  --bg:             var(--ch-cream);
  --bg-alt:         var(--ch-white);
  --bg-dark:        var(--ch-green);
  --surface:        var(--ch-white);
  --surface-tinted: var(--ch-cream-soft);
  --fg:             var(--ch-ink);
  --fg-muted:       var(--ch-muted);
  --fg-subtle:      var(--ch-gray);
  --fg-on-dark:     var(--ch-white);
  --fg-on-dark-muted: rgba(255,255,255,0.7);
  --accent:         var(--ch-mint);
  --accent-strong:  var(--ch-green);
  --hairline:       rgba(27,84,79,0.12);
  --hairline-on-dark: rgba(127,214,207,0.22);

  /* ---------- Type system ---------- */
  --font-sans:   "Montserrat", "Helvetica Neue", Arial, sans-serif;
  /* LouisianaW00 substitute for logo lockup mockups (real file is logo-only).
     Uses a similar warm marker-script: "Caveat" from Google Fonts.
     Flag: this is a SUBSTITUTE — final logo must use the LouisianaW00-derived PNGs. */
  --font-logo-fallback: "Caveat", "Brush Script MT", cursive;

  /* Display / Hero */
  --fs-display:  64px;  --lh-display:  1.05;  --ls-display: -1px;     --fw-display: 800;
  --fs-h1:       44px;  --lh-h1:       1.15;  --ls-h1:      -0.5px;   --fw-h1: 700;
  --fs-h2:       34px;  --lh-h2:       1.2;   --ls-h2:      -0.3px;   --fw-h2: 700;
  --fs-h3:       22px;  --lh-h3:       1.3;   --ls-h3:      0;        --fw-h3: 600;
  --fs-subhead:  17px;  --lh-subhead:  1.45;  --ls-subhead: 0.5px;    --fw-subhead: 600;
  --fs-body:     16px;  --lh-body:     1.7;   --ls-body:    0;        --fw-body: 400;
  --fs-body-sm:  14px;  --lh-body-sm:  1.65;  --ls-body-sm: 0;
  --fs-caption:  12px;  --lh-caption:  1.4;   --ls-caption: 2.5px;    --fw-caption: 300;
  --fs-eyebrow:  11px;  --lh-eyebrow:  1.4;   --ls-eyebrow: 3.5px;    --fw-eyebrow: 700;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 8px;     /* buttons, inputs */
  --r-md: 12px;    /* cards */
  --r-lg: 20px;    /* large feature cards */
  --r-pill: 999px; /* badges, mint capsules */

  /* ---------- Spacing scale (4-pt) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 80px; --sp-10: 100px;

  /* ---------- Elevation ---------- */
  --shadow-sm:  0 1px 0 rgba(0,0,0,0.06);                       /* navbar baseline */
  --shadow-card:0 2px 20px rgba(var(--ch-shadow-rgb), 0.08);    /* cards */
  --shadow-lg: 0 12px 40px rgba(var(--ch-shadow-rgb), 0.14);    /* modals, hero */
  --shadow-focus: 0 0 0 3px rgba(127,214,207,0.45);

  /* ---------- Motion ---------- */
  --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ---------- Semantic element styles ---------- */
.ch-display, h1.ch-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg);
}
.ch-h1, h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-h1);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--fg);
}
.ch-h2, h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-h2);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--fg);
}
.ch-h3, h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-h3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg);
}
.ch-subhead {
  font-family: var(--font-sans);
  font-weight: var(--fw-subhead);
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-subhead);
  color: var(--fg-muted);
}
.ch-body, p {
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}
.ch-body--ink { color: var(--fg); }
.ch-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.ch-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-caption);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.ch-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-eyebrow);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* ---------- Resets a card may want ---------- */
.ch-base {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}