/* ============================================================
   KLINIK PRATAMA SEHAT MANDIRI — Core Colors & Type
   Brand: friendly, vibrant, clean community health clinic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- BRAND CORE (sampled from the logo) ---------- */
  --brand-teal:   #27A399;  /* primary — calm, clinical, trustworthy */
  --brand-red:    #FE1743;  /* energy / alert / the medical cross    */
  --brand-yellow: #FFC108;  /* warmth / optimism                     */
  --brand-lime:   #CCDB38;  /* fresh / health / growth               */

  /* ---------- TEAL SCALE (primary) ---------- */
  --teal-50:  #EAF6F4;
  --teal-100: #CFE9E5;
  --teal-200: #A6D8D1;
  --teal-300: #6FC4BB;
  --teal-400: #45B3A8;
  --teal-500: #27A399;
  --teal-600: #1F8A82;
  --teal-700: #1B7A72;
  --teal-800: #13564F;
  --teal-900: #0F4945;

  /* ---------- LIME SCALE ---------- */
  --lime-100: #F3F7D7;
  --lime-200: #E6EEAE;
  --lime-300: #DAE684;
  --lime-500: #CCDB38;
  --lime-700: #9BA827;

  /* ---------- YELLOW SCALE ---------- */
  --yellow-100: #FFF3CE;
  --yellow-300: #FFDD7A;
  --yellow-500: #FFC108;
  --yellow-700: #C28F00;

  /* ---------- RED SCALE ---------- */
  --red-100: #FFD7DF;
  --red-300: #FF7088;
  --red-500: #FE1743;
  --red-700: #C20023;

  /* ---------- NEUTRALS (warm teal-tinted greys) ---------- */
  --ink:      #16302E;  /* near-black, slight teal cast */
  --slate-700:#334745;
  --slate-500:#5A6B69;
  --slate-400:#7E8C8B;
  --slate-300:#A9B4B3;
  --line:     #E2E8E7;
  --line-soft:#EDF2F1;
  --surface:  #FFFFFF;
  --bg:       #F4F8F7;
  --bg-cool:  #ECFEFE;  /* faint cyan wash from gradient assets */

  /* ---------- SEMANTIC ---------- */
  --fg-1: var(--ink);        /* primary text          */
  --fg-2: var(--slate-500);  /* secondary text        */
  --fg-3: var(--slate-400);  /* tertiary / captions   */
  --fg-on-brand: #FFFFFF;    /* text on teal/red fills */

  --primary:        var(--teal-500);
  --primary-hover:  var(--teal-600);
  --primary-press:  var(--teal-700);
  --primary-soft:   var(--teal-50);

  --accent-warm:    var(--yellow-500);
  --accent-fresh:   var(--lime-500);
  --danger:         var(--red-500);
  --success:        var(--teal-500);

  --focus-ring: color-mix(in srgb, var(--teal-500) 45%, transparent);

  /* ---------- BRAND GRADIENTS (from supplied assets) ---------- */
  --grad-lime-cyan: linear-gradient(115deg, #CBE87E 0%, #C8FFF7 55%, #C7FEF8 100%); /* @kind color */
  --grad-teal-soft: linear-gradient(180deg, #FFFFFF 0%, #E3EFEF 60%, #C7E0DD 100%); /* @kind color */
  --grad-cyan-soft: linear-gradient(180deg, #FFFFFF 0%, #ECFEFE 55%, #D8FFFC 100%); /* @kind color */
  --grad-hero:      linear-gradient(125deg, var(--teal-500) 0%, var(--teal-600) 60%, var(--teal-700) 100%);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Montserrat', system-ui, sans-serif;  /* headlines, numbers, badges */
  --font-body:    'Montserrat', system-ui, sans-serif;  /* body, UI, captions         */

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

  /* ---------- SHADOWS (soft, teal-tinted, never harsh) ---------- */
  --shadow-xs: 0 1px 2px rgba(22,48,46,.06);
  --shadow-sm: 0 2px 8px rgba(22,48,46,.07);
  --shadow-md: 0 8px 24px rgba(22,48,46,.10);
  --shadow-lg: 0 18px 48px rgba(22,48,46,.14);
  --shadow-brand: 0 12px 30px rgba(39,163,153,.28);

  /* ---------- SPACING (4px base) ---------- */
  --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: 96px;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Display = Poppins, Body = Plus Jakarta Sans
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.18;
  color: var(--fg-1);
}
.t-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg-2);
}
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
}
.t-small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.t-tabular {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}