/* =====================================================================
   Gülümseten Kareler — Design Tokens
   Koyu tema: antrasit + altın · Açık tema: krem + bronz
   Renkler [data-theme] ile değişir; ölçek/spacing ortak.
   ===================================================================== */

:root {
  /* --- Tipografi aileleri --- */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body: "Inter", "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-arabic: "Tajawal", "Cairo", system-ui, sans-serif;

  /* --- Tipografi ölçeği (modüler, 1.25) --- */
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.4rem;
  --fs-xl: 1.9rem;
  --fs-2xl: 2.6rem;
  --fs-3xl: 3.6rem;
  --fs-hero: clamp(3.2rem, 9vw, 8.2rem);

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* --- Spacing (8px tabanlı) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* --- Kap genişlikleri --- */
  --container: 1240px;
  --container-narrow: 820px;

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

  /* --- Geçiş süreleri --- */
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- z-index --- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  color-scheme: dark;
}

/* ---------------- KOYU TEMA (varsayılan): antrasit + altın ------------- */
:root,
[data-theme="dark"] {
  --bg: #14161a;
  --bg-elev: #1b1e23;
  --surface: #21252b;
  --surface-2: #2a2f36;
  --line: #33383f;
  --line-soft: #262b31;

  --text: #ece9e2;
  --text-muted: #a7a49b;
  --text-faint: #757269;

  --accent: #c9a24b;          /* altın */
  --accent-strong: #dcb45e;
  --accent-soft: rgba(201, 162, 75, 0.14);
  --on-accent: #14161a;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);

  --overlay: rgba(10, 11, 13, 0.72);
  --hero-scrim: linear-gradient(180deg, rgba(10,11,13,0.15) 0%, rgba(10,11,13,0.55) 60%, rgba(10,11,13,0.85) 100%);
  color-scheme: dark;
}

/* ---------------- AÇIK TEMA: krem + bronz ---------------------------- */
[data-theme="light"] {
  --bg: #f6f1e7;
  --bg-elev: #fbf7ef;
  --surface: #fffdf8;
  --surface-2: #f1e9db;
  --line: #e2d7c4;
  --line-soft: #ece3d3;

  --text: #2a2620;
  --text-muted: #6d6455;
  --text-faint: #9a8f7c;

  --accent: #9c6b3f;          /* bronz */
  --accent-strong: #855530;
  --accent-soft: rgba(156, 107, 63, 0.12);
  --on-accent: #fffdf8;

  --shadow-sm: 0 2px 10px rgba(90, 70, 40, 0.10);
  --shadow: 0 14px 40px rgba(90, 70, 40, 0.14);
  --shadow-lg: 0 30px 70px rgba(90, 70, 40, 0.18);

  --overlay: rgba(40, 34, 26, 0.55);
  --hero-scrim: linear-gradient(180deg, rgba(20,16,10,0.10) 0%, rgba(20,16,10,0.35) 60%, rgba(20,16,10,0.62) 100%);
  color-scheme: light;
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}

/* Dar ekran: uzun Türkçe kelimeler ("Ölümsüzleştiriyoruz") viewport'a sığsın.
   11.2vw → 390px'te ~43.7px, 320px'te ~35.8px; ölçülen kelime genişliği 7.38em. */
@media (max-width: 700px) {
  :root { --fs-hero: clamp(2.2rem, 11.2vw, 3rem); }
}