/* ============================================================
   HEALINK DESIGN SYSTEM — Core foundations
   Colors + Typography tokens (base + semantic)
   Healink.ai — Treatment Coordination, reimagined
   ============================================================ */

/* ---- Fonts (licensed brand files in /fonts) -------------------
   Primary  : BC Novatica Medium  (display, headings, logo)
   Secondary: Inter               (body, UI, CTAs)
   Tertiary : Doto (rounded)       (eyebrow, labels)
   Paths are relative to this CSS file at the project root.
---------------------------------------------------------------- */
@font-face {
  font-family: 'BC Novatica';
  src: url('../fonts/BCNovatica-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Doto';
  src: url('../fonts/Doto-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand palette ---- */
  --healink-green:  #2E3939;  /* primary dark, UI text, dark bg            */
  --slate:          #5F7172;  /* secondary text on light, secondary dark bg */
  --slate-soft:     #7F8D8C;  /* muted slate — sub-labels, captions        */
  --azure:          #C8E4E5;  /* accent, CTAs, highlights                  */
  --light-grey:     #EAECEA;  /* secondary light bg, borders, text on dark */
  --cream:          #FEFCF6;  /* primary light bg, text on dark            */
  --ink:            #24292D;  /* text that sits on azure CTAs              */

  /* warm radiance — the signature ambient gradient (softened tint) */
  --warm-1:         #FAF2D6;
  --warm-2:         #FEFCF6;
  --warm-radiance:  radial-gradient(circle at 50% 0%, #FAF2D6 0%, #FEFCF6 70%);

  /* ---- Semantic surface roles ---- */
  --bg:             var(--cream);
  --bg-alt:         var(--light-grey);
  --bg-dark:        var(--healink-green);
  --surface:        var(--cream);
  --border:         var(--light-grey);
  --border-dark:    rgba(254,252,246,0.12);

  --fg:             var(--healink-green);   /* primary text on light */
  --fg-muted:       var(--slate);           /* secondary text on light */
  --fg-on-dark:     var(--cream);           /* primary text on dark */
  --fg-on-dark-mut: var(--light-grey);      /* secondary text on dark */

  --accent:         var(--azure);
  --accent-fg:      var(--ink);

  /* glassmorphism (used over photography / dark cards) */
  --glass-bg:       rgba(111,110,105,0.30);
  --glass-blur:     blur(38px);

  /* ---- Type families ---- */
  --font-display: 'BC Novatica', system-ui, sans-serif;  /* headings, logo */
  --font-body:    'Inter', system-ui, sans-serif;        /* body, UI, CTAs  */
  --font-mono:    'Doto', monospace;                     /* eyebrow, labels */

  /* ---- Type scale (px @ desktop) ---- */
  --fs-display:   112px;  /* hero brand statements           */
  --fs-h1:        56px;   /* page / hero headlines           */
  --fs-h2:        44px;   /* large quotes, section heads     */
  --fs-h3:        32px;   /* card / feature headings         */
  --fs-h4:        25.6px; /* small headings, glass-card title*/
  --fs-body-lg:   24px;   /* lead paragraph                  */
  --fs-body:      16px;   /* default body / CTA              */
  --fs-sm:        14px;   /* captions, fine print            */
  --fs-eyebrow:   16px;   /* Doto eyebrow / badge            */

  /* ---- Radii ---- */
  --r-xs:   4px;   /* badges, chips        */
  --r-sm:   6px;   /* buttons              */
  --r-md:   12px;  /* nav bar, inputs      */
  --r-lg:   24px;  /* media / feature cards*/
  --r-xl:   32px;  /* large showcase cards */
  --r-full: 999px; /* avatars, icon dots   */

  /* ---- Spacing (4px base grid) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 64px; --sp-9: 88px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(46,57,57,0.06);
  --shadow-md: 0 8px 24px rgba(46,57,57,0.08);
  --shadow-lg: 0 24px 60px rgba(46,57,57,0.12);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.0;
  letter-spacing: -0.06em;
  color: var(--fg);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.1;
  color: var(--fg);
}
.t-body-lg {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body-lg);
  line-height: 1.2;
  color: var(--fg-muted);
}
.t-body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.2;
  color: var(--fg-muted);
}
.t-sm {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1.2;
  color: var(--fg-muted);
}
/* Doto eyebrow — wide tracking, rounded dot-matrix character.
   ROND 100 = fully rounded dots (Doto Rounded), weight 900 = Black. */
.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: 900;
  font-variation-settings: 'ROND' 100, 'wght' 900;
  font-size: var(--fs-eyebrow);
  line-height: 1.04;
  letter-spacing: 0.04em;
  color: var(--slate);
}