/*
  Groove görsel sistem token'ları (KONSEPT)
  Üretim koduna doğrudan kopyalanmak için değil; Codex entegrasyonunda
  değişken adları ve değerleri referans olarak kullanılır.
  Kaynak: CLAUDE.md "Tasarım sistemi" + docs/04-gorsel-brief.md
*/
:root {
  /* Marka paleti (onaylı) */
  --teal: #00A5A5;          /* ONAYLI: marka vurgusu, rota, ikon, büyük yüzey; beyazda küçük metin değil */
  --teal-dark: #007B7B;     /* ONAYLI: tüm birincil butonlar (beyaz metin), küçük teal metin, bağlantı */
  --sky: #C8E1E8;           /* ikincil yüzey, koyu zeminde vurgu metni */
  --panel: #ECF7F8;         /* panel / bölüm dolgusu */
  --ink: #0B1F26;           /* başlık, koyu zemin */
  --navy: #003066;          /* kurumsal destek; kapalı kullanım listesi tasarim-sistemi.md §2 */
  --teal-corp: #00786C;     /* kurumsal destek teal */

  /* Türetilmiş nötrler (AA kontrastı hesaplandı) */
  --ink-2: #3D5158;         /* gövde metni  — beyazda 8,4:1 */
  --ink-3: #5A6E74;         /* yardımcı metin — beyazda 5,4:1, panelde 4,9:1 */
  --line: #D6E4E7;          /* ayırıcı çizgi */
  --line-strong: #B9CFD4;
  --paper: #FFFFFF;
  --paper-2: #F6FAFA;       /* sayfa zemini (çok hafif) */
  --teal-hover: #006A6A;
  --teal-wash: #D9F0F0;     /* seçili durum dolgusu */
  --navy-wash: #E8EEF6;     /* kurumsal panel */
  --navy-2: #0A3F7A;        /* kurumsal hover */

  /* Durum renkleri: yalnızca sitenin kendi bileşenlerinde (ör. yapılır/yapılmaz listesi) */
  --ok: #00866F;
  --attn: #B86E00;          /* dikkat: beyazda 4,6:1 */
  --attn-wash: #FFF3E0;

  /* Tipografi */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);   /* 40 → 72 */
  --fs-h1: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);      /* 34 → 56 */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.625rem);     /* 28 → 42 */
  --fs-h3: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);      /* 20 → 24 */
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);     /* 17 → 20 */
  --fs-body: 1rem;                                       /* 16 */
  --fs-small: .875rem;                                   /* 14 */
  --fs-micro: .75rem;                                    /* 12, yalnızca etiket */
  --lh-tight: 1.08;
  --lh-head: 1.18;
  --lh-body: 1.6;
  --track-display: -.035em;
  --track-head: -.02em;
  --track-label: .08em;

  /* Boşluk (4 tabanlı) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* Grid */
  --container: 1200px;
  --gutter: 24px;
  --page-pad: clamp(16px, 4vw, 48px);

  /* Şekil */
  --r-sm: 6px;   /* chip, input */
  --r-md: 10px;  /* buton, küçük kart */
  --r-lg: 16px;  /* kart, ürün çerçevesi */
  --r-xl: 24px;  /* büyük bölüm paneli */
  --r-pill: 999px;

  /* Gölge: tek seviye, yumuşak; cam efekti yok */
  --shadow-1: 0 1px 2px rgba(11, 31, 38, .06), 0 1px 1px rgba(11, 31, 38, .04);
  --shadow-2: 0 12px 32px -12px rgba(11, 31, 38, .18), 0 2px 6px rgba(11, 31, 38, .05);

  /* Hareket */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --t-draw: 900ms;

  /* Aktif kitle teması (varsayılan: ortak / ana sayfa) */
  --accent: var(--teal);
  --accent-strong: var(--teal-dark);
  --accent-wash: var(--panel);
  --accent-on-dark: var(--sky);
  --radius-card: var(--r-lg);
  --strip: var(--accent);
}

/* Kitle temaları: tek marka, üç karakter */
[data-audience="bireysel"] {
  --strip: var(--teal);
  --accent: var(--teal);
  --accent-strong: var(--teal-dark);
  --accent-wash: var(--panel);
  --radius-card: var(--r-lg);
}
[data-audience="koclar"] {
  --strip: var(--teal-dark);
  --accent: var(--teal-dark);
  --accent-strong: var(--ink);
  --accent-wash: #F1F5F6;
  --radius-card: 12px;
}
/* Kurumlar: lacivert yalnızca hero, hesaplayıcı sonucu ve seçili güçlü alanlarda
   (üst şerit, menüde seçili kitle). Sayfa gövdesi teal/mürekkep sistemiyle kalır. */
[data-audience="kurumlar"] {
  --accent: var(--teal-dark);
  --accent-strong: var(--teal-dark);
  --accent-wash: #F1F5F6;
  --accent-on-dark: var(--sky);
  --radius-card: var(--r-md);
  --strip: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; --t-draw: 0ms; }
}