/*
 * İzmir Mobil Lastik — Tasarım Token'ları
 * Kaynak: docs/DESIGN-SYSTEM.md §9 (birebir kopya)
 * Bu dosyayı elle DEĞİŞTİRMEYİN — token güncellemeleri DESIGN-SYSTEM.md üzerinden yapılmalı.
 *
 * v2 (2026-08-28): Koyu tema ("black tones + amber-yellow highlight"). Kullanıcı
 * yönlendirmesiyle açık lacivert/turuncu palet, siyah zemin + amber vurgu ile
 * değiştirildi. Token İSİMLERİ korundu (sayfa CSS'leri bozulmasın): --color-primary
 * artık "ön plan marka vurgusu = amber" anlamına geliyor (eski lacivgerin baskın
 * kullanımı ikon/link/metin rengiydi). Amber ZEMİN kullanılan az sayıda yerde
 * metin --color-on-accent (koyu) olmalı.
 */

:root {
  color-scheme: dark;

  /* Renkler — Marka / Vurgu (canlı sarı #FFC100, v3 2026-08-28) */
  --color-primary: #FFC100;       /* Ön plan marka vurgusu: ikon, link, aktif durum, önemli rakam */
  --color-primary-dark: #E0A800;  /* Sarı koyu ton — hover/pressed, ince ayraç */
  --color-secondary: #FFD24D;     /* Sarı açık ton — ikincil hover, dekoratif vurgu */
  --color-accent: #FFC100;        /* Birincil CTA zemin ("Hemen Ara") — üstünde --color-on-accent */
  --color-accent-hover: #FFD24D;  /* CTA hover zemini */
  --color-accent-light: #FFDA6B;  /* Sadece dekoratif/ikon dolgu, metin taşımaz */
  --color-on-accent: #17120A;     /* Sarı zemin üstündeki metin/ikon (koyu) — kontrast ~11:1 */
  --color-whatsapp: #25D366;      /* WhatsApp marka — ikon-only buton zemini */
  --color-whatsapp-dark: #1FA855; /* Metin taşıyan WhatsApp butonu zemini (koyu temada biraz daha açık) */

  /* Renkler — Nötr (siyah tonları — v3'te bir tık daha koyu) */
  --color-background: #0A0A0B;    /* Sayfa zemini */
  --color-surface: #141518;      /* Kart / bölüm arka planı (zeminden yükseltilmiş) */
  --color-surface-2: #1C1D21;    /* Daha yüksek katman, hover zemini, input dolgusu */
  --color-foreground: #F5F5F6;   /* Başlıklar, birincil metin — zeminde 18:1 (AAA) */
  --color-foreground-muted: #ABADB4; /* İkincil metin — zeminde 8.8:1 (AAA) */
  --color-border: #26272C;       /* İnce kenarlık / ayraç (dekoratif, metin değil) */
  --color-border-strong: #35373D;/* Belirgin kenarlık, input focus dışı */
  --color-muted: #212226;        /* Devre dışı, skeleton, chip dolgusu */

  /* Renkler — Durum (koyu zeminde okunur tonlar) */
  --color-success: #34D399;
  --color-warning: #FFC100;      /* Yıldız/rozet — marka sarısıyla aynı */
  --color-error: #F87171;

  /* Hero / görsel katman */
  --color-hero-overlay-1: rgba(8, 8, 9, 0.55);  /* Görsel üstü koyu perde (üst) */
  --color-hero-overlay-2: rgba(8, 8, 9, 0.94);  /* Görsel üstü koyu perde (alt/kenar) */

  /* Tipografi — Sora (başlık) + Inter (gövde), v3 2026-08-28 */
  --font-heading: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-h1: 2rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.25rem;
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-heading: 1.25;
  --lh-body: 1.6;

  /* Spacing (4px taban) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Layout */
  --container-max: 1280px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Gölge — koyu zeminde gölge zayıf görünür; derin gölge + ince üst-kenar ışığı */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 8px 24px rgba(255, 193, 0, 0.2); /* CTA / vurgulu kart parıltısı */

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;

  /* Dokunma hedefi */
  --tap-target-min: 44px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (min-width: 768px) {
  :root {
    --fs-h1: 2.75rem;
    --fs-h2: 2rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.25rem;
  }
}