/* =========================================================
   Zehra Şahin – Biobellinda · Renk + Tipografi Temelleri
   ========================================================= */

/* Webfonts: Google Fonts (ikame — resmi font kütüphanesi yok) */
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND PALETTE ---------- */
  --brand-primary:         #2f7a3a;
  --brand-primary-dark:    #1f5227;
  --brand-primary-soft:    #e8f2e9;
  --brand-leaf:            #5ea65a;
  --brand-accent:          #c8a24a;
  --brand-accent-soft:     #f5ecd1;
  --brand-whatsapp:        #25d366;
  --brand-whatsapp-dark:   #1ebe5a;

  /* ---------- SURFACES ---------- */
  --bg-base:               #fcfbf8;
  --bg-card:               #ffffff;
  --bg-muted:              #f5f3ec;
  --bg-dark:               #1a2a1d;

  /* ---------- FOREGROUND ---------- */
  --fg-1:                  #1a2a1d;
  --fg-2:                  #3d4a40;
  --fg-3:                  #6b7669;
  --fg-inverse:            #fcfbf8;

  /* ---------- BORDERS ---------- */
  --border:                #e3dfd2;
  --border-strong:         #c9c3af;
  --border-focus:          var(--brand-primary);

  /* ---------- SEMANTIC ---------- */
  --success:               #2f7a3a;
  --warning:               #c8a24a;
  --error:                 #b74135;

  /* ---------- RADII ---------- */
  --radius-sm:             6px;
  --radius-md:             12px;
  --radius-lg:             20px;
  --radius-pill:           999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(26, 42, 29, 0.06), 0 1px 3px rgba(26, 42, 29, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 42, 29, 0.08), 0 2px 6px rgba(26, 42, 29, 0.04);
  --shadow-lg: 0 12px 32px rgba(26, 42, 29, 0.12), 0 4px 10px rgba(26, 42, 29, 0.06);

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

  /* ---------- LAYOUT ---------- */
  --container-max: 1120px;
  --container-p-mobile: 20px;
  --container-p-desktop: 32px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Gabarito', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
}

:root {
  /* ---------- TYPE SCALE ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;

  /* ---------- SEMANTIC TYPE ---------- */
  --h1-size: clamp(36px, 5.5vw, 64px);
  --h1-lh:   1.05;
  --h1-ls:   -0.02em;
  --h1-weight: 700;

  --h2-size: clamp(28px, 3.6vw, 44px);
  --h2-lh:   1.12;
  --h2-ls:   -0.015em;
  --h2-weight: 700;

  --h3-size: clamp(22px, 2.2vw, 28px);
  --h3-lh:   1.2;
  --h3-ls:   -0.01em;
  --h3-weight: 600;

  --h4-size: 20px;
  --h4-lh:   1.3;
  --h4-weight: 600;

  --body-size: 16px;
  --body-lh:   1.6;

  --small-size: 14px;
  --small-lh:   1.5;

  --eyebrow-size: 12px;
  --eyebrow-ls:   0.12em;
  --eyebrow-weight: 600;
}

/* =========================================================
   ROSE THEME — must come AFTER all :root blocks so it wins
   ========================================================= */
html[data-theme="rose"] {
  --brand-primary:         #a8657a;
  --brand-primary-dark:    #7d4557;
  --brand-primary-soft:    #f4dcd6;
  --brand-leaf:            #bc8b9d;
  --brand-accent:          #c8a24a;
  --brand-accent-soft:     #f5ecd1;

  --bg-base:               #fff8f3;
  --bg-card:               #ffffff;
  --bg-muted:              #e7e2da;
  --bg-dark:               #4c2d36;

  --fg-1:                  #2e1a21;
  --fg-2:                  #5a3f48;
  --fg-3:                  #8b7078;
  --fg-inverse:            #fff8f3;

  --border:                #e7dcd6;
  --border-strong:         #c9b3ae;

  --success:               #2f7a3a;
  --shadow-sm: 0 1px 2px rgba(76, 45, 54, 0.08), 0 1px 3px rgba(76, 45, 54, 0.05);
  --shadow-md: 0 4px 12px rgba(76, 45, 54, 0.10), 0 2px 6px rgba(76, 45, 54, 0.05);
  --shadow-lg: 0 12px 32px rgba(76, 45, 54, 0.14), 0 4px 10px rgba(76, 45, 54, 0.07);
}

/* ---------- BASE RESET-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--fg-2);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

/* ---------- TYPOGRAPHY CLASSES ---------- */
.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls);
  font-weight: var(--h1-weight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls);
  font-weight: var(--h2-weight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.h3, h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  font-weight: var(--h3-weight);
  color: var(--fg-1);
  margin: 0;
}
.h4, h4 {
  font-family: var(--font-display);
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  font-weight: var(--h4-weight);
  color: var(--fg-1);
  margin: 0;
}
p { margin: 0 0 1em; text-wrap: pretty; }
.lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--fg-2);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-ls);
  font-weight: var(--eyebrow-weight);
  text-transform: uppercase;
  color: var(--brand-primary);
}
.small { font-size: var(--small-size); line-height: var(--small-lh); }

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--brand-primary-dark); text-decoration: underline; }

/* ---------- CONTAINER ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-p-mobile);
  padding-right: var(--container-p-mobile);
}
@media (min-width: 768px) {
  .container { padding-left: var(--container-p-desktop); padding-right: var(--container-p-desktop); }
}