/* Aile Ekonomisi tasarım değişkenleri. Kaynak: aile-ekonomisi/MARKA.md
   Fontlar:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
   Tema seçimi: <html data-tema="koyu"> veya "pembe"; yoksa sistem tercihi. */

:root {
  --forest: #1F4D3A;
  --forest-deep: #163829;
  --saffron: #E8A33D;
  --saffron-soft: #F6DDB0;
  --surface: #F5F3EC;
  --surface-raised: #FFFFFF;
  --ink: #1A2420;
  --ink-muted: #4E5C55;
  --on-forest: #F5F3EC;
  --line: #D9D4C7;
  --danger: #B3261E;

  /* Grafik serileri için forest tonları (markada tanımlı değil, tasarımda türetildi) */
  --forest-2: #4F7A66;
  --forest-3: #8FB1A0;
  --forest-4: #C9D9CF;

  --font-display: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 72px;

  --radius-sm: 12px;
  --radius-card: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --tap: 44px;
}

:root[data-tema="koyu"] {
  --forest: #7FB89A;
  --forest-deep: #A7D1BA;
  --saffron: #F0B65C;
  --saffron-soft: #3A2E17;
  --surface: #121815;
  --surface-raised: #1B2420;
  --ink: #F1EEE6;
  --ink-muted: #A9B3AD;
  --on-forest: #121815;
  --line: #2C3833;
  --danger: #F2B8B5;
  --forest-3: #3E6B57;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --forest: #7FB89A;
    --forest-deep: #A7D1BA;
    --saffron: #F0B65C;
    --saffron-soft: #3A2E17;
    --surface: #121815;
    --surface-raised: #1B2420;
    --ink: #F1EEE6;
    --ink-muted: #A9B3AD;
    --on-forest: #121815;
    --line: #2C3833;
    --danger: #F2B8B5;
    --forest-3: #3E6B57;
  }
}

/* Duygu'nun pembe teması: aynı değişken adları, pembe değerler */
:root[data-tema="pembe"] {
  --forest: #9E1F5A;
  --forest-deep: #7A1544;
  --saffron-soft: #FCE3EE;
  --surface: #FFF0F6;
  --surface-raised: #FFFFFF;
  --ink: #3D1A2B;
  --ink-muted: #85536B;
  --on-forest: #FFF0F6;
  --line: #F5CFE0;
  --forest-3: #E9A1C1;
}

/* Yazı stilleri (MARKA.md tablosu). Mobilde display 42px, h1 32px. */
.t-display { font: 800 64px/64px var(--font-display); letter-spacing: -0.02em; }
.t-h1      { font: 700 40px/44px var(--font-display); }
.t-h2      { font: 700 28px/34px var(--font-display); }
.t-body-lg { font: 400 20px/30px var(--font-body); }
.t-body    { font: 400 16px/24px var(--font-body); }
.t-label   { font: 600 14px/20px var(--font-body); }
.t-caption { font: 400 13px/18px var(--font-body); }

@media (max-width: 640px) {
  .t-display { font-size: 42px; line-height: 44px; }
  .t-h1 { font-size: 32px; line-height: 36px; }
}