/* ==========================================================================
   Coldwell Banker ART — tasarım token'ları
   Konsept: "Künye" · Kaynak: TASARIM-SISTEMI.md
   Renkler CB kimlik standartlarından (Mart 2024) türetildi; kontrast oranları
   TASARIM-SISTEMI.md'de hesaplıdır.
   ========================================================================== */

@font-face { font-family: "EB Garamond"; src: url("../fonts/garamond-500.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/garamond-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-700.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("../fonts/naskh-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("../fonts/naskh-600.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

:root {
  color-scheme: light;

  /* --- Renk: aydınlık tema --------------------------------------------- */
  --c-paper:      #FAF8F4;  /* sayfa zemini (kırık beyaz) */
  --c-surface:    #FFFFFF;  /* kart, form yüzeyi */
  --c-tint:       #F2EDE5;  /* bölüm zemini */
  --c-mat:        #E6DDD1;  /* paspartu (CB Cement) */
  --c-line:       #D9D0C3;  /* ince ayırıcı çizgi (dekoratif) */
  --c-border:     #857F77;  /* form alanı sınırı (≥3:1) */
  --c-ink:        #2D2926;  /* ana metin (CB Piano Black) 13.6:1 */
  --c-ink-2:      #5E5A55;  /* ikincil metin 6.5:1 */
  --c-ink-3:      #6B665F;  /* etiket, ipucu 5.4:1 (mat üzerinde kullanma) */
  --c-blue:       #012169;  /* CB Blue — eylem, bağlantı, üst bant */
  --c-blue-hover: #0A2F8A;
  --c-blue-soft:  #E8EEF8;  /* seçili durum zemini */
  --c-celestial:  #418FDE;  /* CB Celestial Blue — odak halkası, koyu zeminde vurgu */
  --c-link:       #0B3A9E;
  --c-on-blue:    #FFFFFF;
  --c-brand:      #012169;  /* üst bant ve marka alanları: iki temada da CB Blue */
  --c-on-brand:   #FFFFFF;  /* 14.8:1 */
  --c-on-brand-2: #C9D6F0;  /* marka zemininde ikincil metin 10.1:1 */
  --c-brand-accent: #8DBBEE;/* marka zemininde vurgu 7.4:1 */
  --c-danger:     #A3262A;
  --c-danger-soft:#FBECEB;
  --c-success:    #1E6B45;
  --c-success-soft:#E6F2EB;
  --c-wa:         #075E54;  /* WhatsApp düğmesi (koyu yeşil, beyaz metin) */
  --c-overlay:    rgba(12, 18, 34, .72);

  /* --- Tipografi -------------------------------------------------------- */
  --ff-display: "EB Garamond", "Garamond", "Times New Roman", serif;
  --ff-body: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ff-ar: "Noto Naskh Arabic", "Roboto", "Segoe UI", Tahoma, sans-serif;

  --fs-100: 0.875rem;   /* 14px  etiket, künye başlığı (büyük harf + aralık) */
  --fs-200: 1rem;       /* 16px  ikincil metin */
  --fs-300: 1.125rem;   /* 18px  gövde */
  --fs-400: 1.375rem;   /* 22px  giriş paragrafı, h4 */
  --fs-500: 1.75rem;    /* 28px  h3, kart fiyatı (büyük) */
  --fs-600: clamp(1.875rem, 1.5rem + 1.2vw, 2.375rem);   /* 30→38px h2 */
  --fs-700: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);      /* 36→56px h1 */
  --fs-800: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);      /* 40→68px vitrin */

  --lh-body: 1.6;
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --tracking-label: 0.09em;
  --measure: 68ch;

  /* --- Boşluk (4 px tabanlı) ------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section-y: clamp(56px, 7vw, 112px);
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1280px;
  --container-narrow: 860px;

  /* --- Köşe, çizgi, gölge ---------------------------------------------- */
  --r-0: 0;
  --r-1: 2px;      /* künye, fotoğraf */
  --r-2: 6px;      /* düğme, form alanı */
  --r-pill: 999px; /* durum etiketi */
  --hair: 1px solid var(--c-line);
  --sh-1: 0 1px 2px rgba(20, 18, 15, .06), 0 1px 1px rgba(20, 18, 15, .04);
  --sh-2: 0 10px 30px -12px rgba(20, 18, 15, .22);
  --sh-bar: 0 -8px 24px rgba(12, 18, 34, .14);

  /* --- Paspartu (imza öğesi) --------------------------------------------- */
  --mat: 6px;
  --mat-hero: 10px;

  /* --- Hareket --------------------------------------------------------- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* --- Katmanlar -------------------------------------------------------- */
  --z-sticky: 20; --z-header: 30; --z-drawer: 40; --z-modal: 50; --z-toast: 60;

  /* --- Odak ------------------------------------------------------------- */
  --focus: 0 0 0 3px var(--c-paper), 0 0 0 6px var(--c-celestial);
}

@media (min-width: 768px) { :root { --mat: 8px; --mat-hero: 14px; } }
@media (min-width: 1200px) { :root { --mat-hero: 18px; } }

/* --- Koyu tema: sistem tercihi (kullanıcı açık tema seçmediyse) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-paper: #0C1222; --c-surface: #131B2F; --c-tint: #18223A; --c-mat: #243049;
    --c-line: #2E3A56; --c-border: #6E7894;
    --c-ink: #F2EEE8; --c-ink-2: #BDB8B0; --c-ink-3: #9A958E;
    --c-blue: #418FDE; --c-blue-hover: #6AA8E8; --c-blue-soft: #1B2A4A;
    --c-link: #8DBBEE; --c-on-blue: #0C1222;
    --c-danger: #FF9A94; --c-danger-soft: #3A1C22; --c-success: #7FD1A6; --c-success-soft: #173326;
    --c-wa: #0B7A6B; --c-overlay: rgba(4, 7, 14, .82);
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4); --sh-2: 0 12px 32px -12px rgba(0, 0, 0, .6); --sh-bar: 0 -8px 24px rgba(0, 0, 0, .45);
  }
}
/* --- Koyu tema: kullanıcı seçimi ---------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-paper: #0C1222; --c-surface: #131B2F; --c-tint: #18223A; --c-mat: #243049;
  --c-line: #2E3A56; --c-border: #6E7894;
  --c-ink: #F2EEE8; --c-ink-2: #BDB8B0; --c-ink-3: #9A958E;
  --c-blue: #418FDE; --c-blue-hover: #6AA8E8; --c-blue-soft: #1B2A4A;
  --c-link: #8DBBEE; --c-on-blue: #0C1222;
  --c-danger: #FF9A94; --c-danger-soft: #3A1C22; --c-success: #7FD1A6; --c-success-soft: #173326;
  --c-wa: #0B7A6B; --c-overlay: rgba(4, 7, 14, .82);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4); --sh-2: 0 12px 32px -12px rgba(0, 0, 0, .6); --sh-bar: 0 -8px 24px rgba(0, 0, 0, .45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}