/*
  Tio Medikal — Tasarım Token Sistemi
  ===================================
  Birincil renk, kaynak/logo.jpeg dosyasından piksel örneklemesiyle çıkarıldı
  (bkz. proje notları). En sık geçen dolgu pikseli #008E8F — RAL 5018
  (Türkisblau) ailesine karşılık gelir. Bu HAM değer sadece büyük/dekoratif
  kullanım için güvenlidir (~4:1 kontrast); metin/buton gibi küçük ölçekli
  kullanımlar için WCAG AA'yı (4.5:1) geçen koyulaştırılmış bir "interactive"
  türevi (--color-primary) hesaplanarak üretildi. Tüm kontrast oranları
  aşağıda satır içi yorumlarla belgelendi (WCAG 2.1 AA eşiği: normal metin
  4.5:1, büyük metin/UI bileşeni 3:1).

  Mimari: primitive (ham, moddan bağımsız) → semantic (açık/koyu mod'a göre
  değişen, gerçekte kullanılan) token'lar. base.css SADECE semantic
  token'ları semantik HTML etiketlerine uygular — utility class yok.
*/

:root {
  /* ============ PRIMITIVE: Marka turkuazı (logodan örneklendi) ============ */
  --teal-raw: #008e8f;      /* logo.jpeg örneklemesi — dolgu pikseli, RAL 5018 */
  --teal-700: #007a7a;      /* interactive/light — üzerinde beyaz metin 5.17:1 */
  --teal-800: #005b5c;      /* interactive hover/light — 7.92:1 */
  --teal-300: #08a6a7;      /* interactive/dark — koyu lacivert zemin üzerinde 5.89:1 */
  --teal-200: #09ccce;      /* interactive hover/dark */
  --teal-tint-light: #edfafa;
  --teal-tint-dark: #1c4a4a;

  /* ============ PRIMITIVE: Koyu lacivert (metin + zemin ikili rolü) ======= */
  --navy-900: #0e1a25;      /* açık modda metin (17.81:1 beyaz üzerinde) · koyu modda zemin */
  --navy-800: #162939;      /* koyu modda kart/yüzey zemini */
  --navy-700: #1f3a51;      /* koyu modda kenarlık */

  /* ============ PRIMITIVE: Nötr gri skalası — 9 kademe =================== */
  --gray-100: #f6f8f8;
  --gray-200: #ebeef0;
  --gray-300: #d6dee0;
  --gray-400: #b6c4c8;
  --gray-500: #91a5ac;
  --gray-600: #6b868e;
  --gray-700: #51656c;      /* açık modda ikincil metin — 6.13:1 beyaz üzerinde */
  --gray-800: #38464a;
  --gray-900: #191f21;

  /* ============ PRIMITIVE: Durum renkleri (başarı/uyarı/hata) ============ */
  --success-700: #1b7a4b;   /* açık mod — 5.34:1 beyaz üzerinde */
  --success-300: #34d399;   /* koyu mod — 9.16:1 lacivert üzerinde */
  --warning-800: #8a5a00;   /* açık mod — 5.93:1 beyaz üzerinde */
  --warning-300: #fbbf24;   /* koyu mod — 10.55:1 lacivert üzerinde */
  --danger-700: #b3261e;    /* açık mod — 6.54:1 beyaz üzerinde */
  --danger-300: #f87171;    /* koyu mod — 6.36:1 lacivert üzerinde */

  /* Marka rozetleri — turkuaz dışındaki iki alt marka için ayrı, sabit vurgu */
  --gold-accent: #a8791a;   /* sertifika mührü / TIOPLAS+ vurgusu */
  --blue-accent: #1e4d7b;   /* TIOMEDIKAL vurgusu */

  /* ================= SEMANTIC — açık mod (varsayılan) ===================== */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: var(--gray-100);
  --color-surface-sunken: var(--gray-200);
  /* Eksik görsel yer tutucusu bilinçli olarak nötr gri skalasından AYRI —
     sıcak/kremimsi bir ton, "veri eksik ama alarm değil" hissi verir (bkz.
     components.css#.media-placeholder). Metin kontrastı: 5.49:1 (açık),
     8.56:1 (koyu) — ikisi de WCAG AA'yı (4.5:1) geçer. */
  --color-placeholder-bg: #f7f2e7;
  --color-placeholder-border: #a89972;

  --color-text: var(--navy-900);
  --color-text-muted: var(--gray-700);
  --color-border: var(--gray-300);
  --color-border-strong: var(--gray-500);

  --color-primary: var(--teal-700);
  --color-primary-hover: var(--teal-800);
  --color-primary-tint: var(--teal-tint-light);
  --color-primary-contrast: #ffffff;   /* birincil zemin üzerindeki metin */
  --color-brand: var(--teal-raw);      /* logo/dekoratif — sadece büyük/kalın kullanım */

  --color-success: var(--success-700);
  --color-warning: var(--warning-800);
  --color-danger: var(--danger-700);
  --color-focus: #ff8a00;              /* her iki modda da yeterli kontrast */

  --shadow-color: 16 32 45;            /* navy tonlu gölge — rgb() bileşenleri */
  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.10);
  --shadow-md: 0 8px 24px rgb(var(--shadow-color) / 0.14);

  color-scheme: light;
}

/* Koyu mod iki bağımsız sinyalden gelebilir: sistem tercihi (prefers-color-scheme)
   VEYA header'daki manuel açık/koyu anahtarı (data-theme, bkz. assets/js/theme-toggle.js).
   Manuel seçim HER ZAMAN sistemi ezer — bu yüzden media query ":not([data-theme="light"])"
   ile korunur (kullanıcı sistem koyuyken elle açığı seçtiyse media query devre dışı
   kalır) ve [data-theme="dark"] kuralı sistem AÇIK olsa bile koyuyu zorlar. Token
   değerleri kasıtlı olarak iki blokta AYNI — bu dosya önişlemcisiz düz CSS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--navy-900);
    --color-surface: var(--navy-800);
    --color-surface-alt: var(--navy-800);
    --color-surface-sunken: var(--navy-700);
    --color-placeholder-bg: #2b2418;
    --color-placeholder-border: #6b5f42;

    --color-text: var(--gray-100);
    --color-text-muted: var(--gray-400);
    --color-border: var(--navy-700);
    --color-border-strong: var(--gray-600);

    --color-primary: var(--teal-300);
    --color-primary-hover: var(--teal-200);
    --color-primary-tint: var(--teal-tint-dark);
    --color-primary-contrast: var(--navy-900);
    --color-brand: var(--teal-300);

    --color-success: var(--success-300);
    --color-warning: var(--warning-300);
    --color-danger: var(--danger-300);

    --shadow-color: 0 0 0;
    --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.45);
    --shadow-md: 0 8px 24px rgb(var(--shadow-color) / 0.55);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: var(--navy-900);
  --color-surface: var(--navy-800);
  --color-surface-alt: var(--navy-800);
  --color-surface-sunken: var(--navy-700);
  --color-placeholder-bg: #2b2418;
  --color-placeholder-border: #6b5f42;

  --color-text: var(--gray-100);
  --color-text-muted: var(--gray-400);
  --color-border: var(--navy-700);
  --color-border-strong: var(--gray-600);

  --color-primary: var(--teal-300);
  --color-primary-hover: var(--teal-200);
  --color-primary-tint: var(--teal-tint-dark);
  --color-primary-contrast: var(--navy-900);
  --color-brand: var(--teal-300);

  --color-success: var(--success-300);
  --color-warning: var(--warning-300);
  --color-danger: var(--danger-300);

  --shadow-color: 0 0 0;
  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.45);
  --shadow-md: 0 8px 24px rgb(var(--shadow-color) / 0.55);

  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root {
  /* ================= TİPOGRAFİ — akışkan, 6 kademe ========================
     Taban: gövde metni (--fs-body) HİÇBİR ekranda 16px (1rem) altına inmez —
     clamp() alt sınırı tam olarak 1rem'dir. Küçük/ikincil metin (--fs-caption)
     gövde metni SAYILMADIĞI için bu kısıtın dışındadır (rozet, tarih, dipnot). */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Roboto Mono", Consolas, monospace;

  --fs-caption: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);   /* ~13–14px */
  --fs-body:    clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);        /* 16–17px — ASLA 16px altına inmez */
  --fs-h4:      clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);     /* ~19–22px */
  --fs-h3:      clamp(1.375rem, 1.2rem + 1vw, 1.75rem);         /* ~22–28px */
  --fs-h2:      clamp(1.75rem, 1.45rem + 1.8vw, 2.375rem);      /* ~28–38px */
  --fs-h1:      clamp(2.25rem, 1.7rem + 3.2vw, 3.5rem);         /* ~36–56px */

  --lh-tight: 1.15;
  --lh-normal: 1.6;
  --measure: 70ch;              /* satır uzunluğu: 65–75 karakter aralığının ortası */
  --tracking-label: 0.08em;
  --tracking-plate: 0.02em;

  /* ================= BOŞLUK ÖLÇEĞİ — 4px taban ============================ */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */

  /* ================= DÜZEN / KENARLIK / GEÇİŞ ============================= */
  --content-max: 78rem;
  --content-narrow: 46rem;
  /* Header'ın SABİT yüksekliği — kaydırınca "incelme" efekti bu değeri asla
     değiştirmez (sadece iç öğeler transform: scale ile küçülür), bu yüzden
     mega menü paneli de aynı token'ı `top` için kullanarak senkron kalır. */
  --header-block-size: 4.5rem;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --border-w: 1px;

  --transition-fast: 150ms ease;
  --transition-base: 240ms ease;
  /* Yerleşik ease-out UI hareketi için fazla zayıf — kart kalkışı gibi
     transform geçişleri bu güçlü eğriyi kullanır. */
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);

  --z-header: 100;
  --z-skip-link: 200;
}

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

/* ============================================================================
   GERİYE DÖNÜK UYUMLULUK — layout.css / components.css / pages.css bu eski
   isimlerle yazıldı (bkz. önceki oturum). Yeniden adlandırma bu dosyaların
   kapsamı dışında olduğundan, eski adlar burada yeni semantic token'lara
   köprüleniyor. Yeni kod DOĞRUDAN yukarıdaki semantic adları kullanmalı;
   aşağıdaki blok yalnızca mevcut dosyaları kırmamak içindir.
   ========================================================================= */
:root {
  --color-ink: var(--color-text);
  --color-ink-soft: var(--color-text-muted);
  --color-plate: var(--navy-900);          /* footer/plaka her modda sabit koyu şerit */
  --color-plate-text: var(--gray-100);
  --color-plate-line: rgb(231 235 231 / 0.22);
  --color-primary-dark: var(--color-primary-hover);
  --color-accent: var(--gold-accent);

  --brand-tioset: var(--color-primary);
  --brand-tioset-tint: var(--color-primary-tint);
  --brand-tiomedikal: var(--blue-accent);
  --brand-tiomedikal-tint: var(--gray-200);
  --brand-tioplas: var(--gold-accent);
  --brand-tioplas-tint: #f5ecd8;

  /* eski numaralı ölçek → yeni semantic tipografi (bkz. yorum: rol eşleşmesi) */
  --fs-100: var(--fs-caption);
  --fs-200: var(--fs-body);
  --fs-300: var(--fs-body);
  --fs-400: var(--fs-h4);
  --fs-500: var(--fs-h3);
  --fs-700: var(--fs-h2);
}