/* ============================================================
   HealSpace Psychological Clinic — Colors & Type Foundations
   Import this file to inherit all brand tokens.
   Colors sampled directly from the master logo + collateral.
   ============================================================ */

/* ---- Webfonts -------------------------------------------------
   The HealSpace wordmark uses a proprietary hand-brush script that
   ships as artwork (assets/logo-full.png). For live text we substitute
   the closest free brush face — Kaushan Script — and flag it as a
   substitution. All other faces are exact-intent matches to the
   collateral (friendly geometric sans + warm rounded body + a high-
   contrast didone for celebratory headlines).
---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Nunito+Sans:wght@400;600;700;800&family=Kaushan+Script&family=Playfair+Display:wght@500;700;800;900&display=swap');

:root {
  /* ---------- CORE BRAND PALETTE ---------- */
  --hs-sky:        #48A8D8;  /* primary — the brush wordmark */
  --hs-sky-deep:   #2E8CBE;  /* hover / pressed sky */
  --hs-sky-soft:   #DCF0F8;  /* sky tint surface */

  --hs-gold:       #F0BE00;  /* "PSYCHOLOGICAL CLINIC" subtitle */
  --hs-gold-deep:  #D8A400;
  --hs-gold-soft:  #FCF1C9;

  --hs-sprout:     #8FC03A;  /* the growing sprout */
  --hs-sprout-deep:#75A52A;
  --hs-sprout-soft:#EAF4D6;

  --hs-peach:      #F0C090;  /* the cradling hands */
  --hs-peach-soft: #FAE7D4;

  --hs-teal:       #1F4E5E;  /* primary ink — body + Hilom/Sibol room signs */
  --hs-teal-700:   #2C5F70;
  --hs-teal-500:   #4A7A8A;

  --hs-mint:       #C2E0CF;  /* sage surface / celebratory ground */
  --hs-mint-soft:  #E5F2EB;

  --hs-coral:      #F2916F;  /* warm accent — "WE ARE OPEN" */
  --hs-coral-deep: #E0734E;
  --hs-coral-soft: #FBE3D9;

  /* ---------- NEUTRALS ---------- */
  --hs-cream:      #FBFAF6;  /* default page ground */
  --hs-paper:      #FFFFFF;  /* cards / sheets */
  --hs-line:       #E7E3D8;  /* hairline borders */
  --hs-line-soft:  #F0ECE2;

  --hs-ink:        #1F4E5E;  /* = teal, primary text */
  --hs-ink-2:      #5A7178;  /* secondary text */
  --hs-ink-3:      #93A2A6;  /* muted / captions */

  /* ---------- SEMANTIC ---------- */
  --fg1: var(--hs-ink);
  --fg2: var(--hs-ink-2);
  --fg3: var(--hs-ink-3);
  --bg1: var(--hs-cream);
  --bg2: var(--hs-paper);
  --accent: var(--hs-sky);
  --accent-warm: var(--hs-coral);
  --success: var(--hs-sprout-deep);
  --highlight: var(--hs-gold);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Poppins', system-ui, sans-serif;       /* headings, UI */
  --font-body:    'Nunito Sans', system-ui, sans-serif;   /* paragraphs */
  --font-script:  'Kaushan Script', cursive;              /* brand accent (SUBSTITUTE) */
  --font-serif:   'Playfair Display', Georgia, serif;     /* celebratory headlines */

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, diffuse, warm) ---------- */
  --shadow-sm: 0 1px 2px rgba(31,78,94,.06), 0 1px 3px rgba(31,78,94,.05);
  --shadow-md: 0 4px 12px rgba(31,78,94,.08), 0 2px 4px rgba(31,78,94,.05);
  --shadow-lg: 0 14px 40px rgba(31,78,94,.12), 0 4px 10px rgba(31,78,94,.06);
  --shadow-sky: 0 10px 24px rgba(72,168,216,.28);

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

  /* ---------- MOTION ---------- */
  --ease-soft: cubic-bezier(.22,.61,.36,1); /* @kind other */ /* gentle settle */
  --ease-out:  cubic-bezier(.16,1,.3,1); /* @kind other */
  --dur: 240ms; /* @kind other */
}

/* ============================================================
   BASE TYPE SCALE — semantic, fluid-ish, generous line-height
   ============================================================ */
.hs-display {            /* big brand moment */
  font-family: var(--font-display);
  font-weight: 700; font-size: clamp(40px, 6vw, 72px);
  line-height: 1.04; letter-spacing: -.01em; color: var(--fg1);
}
.hs-script {             /* brush accent, e.g. "a safe healing space" */
  font-family: var(--font-script);
  font-weight: 400; font-size: clamp(34px, 5vw, 60px);
  line-height: 1.1; color: var(--hs-sky);
}
.hs-serif {              /* celebratory / editorial headline */
  font-family: var(--font-serif);
  font-weight: 800; font-size: clamp(34px, 5vw, 60px);
  line-height: 1.08; letter-spacing: -.005em; color: var(--hs-teal);
}
h1, .hs-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12;
  letter-spacing: -.01em; color: var(--fg1); margin: 0;
}
h2, .hs-h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.18; color: var(--fg1); margin: 0;
}
h3, .hs-h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 20px; line-height: 1.3; color: var(--fg1); margin: 0;
}
.hs-eyebrow {            /* gold letterspaced label — the "CLINIC" treatment */
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--hs-gold-deep);
}
p, .hs-body {
  font-family: var(--font-body); font-weight: 400;
  font-size: 17px; line-height: 1.65; color: var(--fg2); margin: 0;
}
.hs-lead {
  font-family: var(--font-body); font-weight: 600;
  font-size: 20px; line-height: 1.55; color: var(--fg1);
}
.hs-small {
  font-family: var(--font-body); font-weight: 400;
  font-size: 14px; line-height: 1.5; color: var(--fg3);
}
.hs-mono, code {
  font-family: 'Nunito Sans', ui-monospace, monospace;
  font-size: 14px; color: var(--hs-teal);
}