/* ==========================================================================
   Technomot — Tasarım Tokenları
   Renk, tipografi, boşluk ve yükseklik değerlerinin tek kaynağı.
   Bileşen dosyaları doğrudan hex/px yazmaz, buradaki değişkenleri kullanır.
   ========================================================================== */

:root {
  /* --- Marka renkleri ---------------------------------------------------- */
  /* Ink: logonun zemin rengi (#051428) merkezli koyu lacivert ailesi.
     Header, ana menü, hero ve footer bu tonlarla kurulur. */
  --tm-ink-900: #020a14;
  --tm-ink-800: #051428; /* marka koyusu — logo zemini ile birebir */
  --tm-ink-700: #0a2038;
  --tm-ink-600: #123049;
  --tm-ink-500: #1d4460;
  --tm-ink-400: #2c4661; /* koyu zeminde kenarlık ve ayraçlar */

  /* Accent: marka cyanı (#62d5f3).
     Açık bir renk olduğu için KOYU zeminde metin, AÇIK zeminde yalnızca dolgu
     olarak kullanılır. Açık zeminde metin gerektiğinde accent-800 kullanın. */
  --tm-accent-300: #a8e8fb;
  --tm-accent-400: #8adef7;
  --tm-accent-500: #62d5f3; /* ana marka rengi */
  --tm-accent-600: #2fbfe6;
  --tm-accent-700: #1094bb;
  --tm-accent-800: #0b6d8c; /* beyaz zeminde okunabilir metin tonu */
  --tm-accent-100: #e0f6fd;

  /* Derin cyan: ikincil butonlar, rozetler ve bilgi alanları. */
  --tm-teal-700: #08566f;
  --tm-teal-600: #0b6d8c;
  --tm-teal-500: #1094bb;
  --tm-teal-100: #e0f6fd;

  /* --- Nötrler ----------------------------------------------------------- */
  --tm-white: #ffffff;
  --tm-gray-25: #fbfcfd;
  --tm-gray-50: #f5f7f9;
  --tm-gray-100: #eef1f5;
  --tm-gray-200: #e1e6ec;
  --tm-gray-300: #cbd3dd;
  --tm-gray-400: #9aa6b6;
  --tm-gray-500: #6d7a8c;
  --tm-gray-600: #515d6e;
  --tm-gray-700: #3a4552;
  --tm-gray-800: #262e39;

  /* --- Durum renkleri ---------------------------------------------------- */
  --tm-success-600: #12855a;
  --tm-success-100: #d8f3e6;
  --tm-danger-600: #c62828;
  --tm-danger-100: #fde4e4;
  --tm-warning-600: #b45309;
  --tm-warning-100: #fef3c7;
  --tm-info-600: #1d5fbf;
  --tm-info-100: #e0ecff;

  /* --- Anlamsal atamalar ------------------------------------------------- */
  --tm-bg: var(--tm-gray-50);
  --tm-surface: var(--tm-white);
  --tm-surface-alt: var(--tm-gray-100);
  --tm-border: var(--tm-gray-200);
  --tm-border-strong: var(--tm-gray-300);

  --tm-text: var(--tm-ink-800);
  /* gray-600: beyaz zeminde küçük metin için WCAG AA kontrastını sağlar */
  --tm-text-muted: var(--tm-gray-600);
  --tm-text-inverse: var(--tm-white);
  --tm-text-price: var(--tm-accent-800);
  /* Cyan zeminler üzerinde kullanılacak metin rengi */
  --tm-on-accent: var(--tm-ink-900);

  --tm-link: var(--tm-ink-600);
  --tm-link-hover: var(--tm-accent-800);
  --tm-focus-ring: 0 0 0 3px rgba(16, 148, 187, 0.5);

  /* --- Tipografi --------------------------------------------------------- */
  --tm-font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --tm-font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  /* 1.200 oranlı ölçek, 16px tabanlı */
  --tm-fs-2xs: 0.6875rem; /* 11px — rozet, etiket */
  --tm-fs-xs: 0.75rem; /* 12px — yardımcı metin */
  --tm-fs-sm: 0.8125rem; /* 13px — meta, tablo */
  --tm-fs-base: 0.9375rem; /* 15px — gövde */
  --tm-fs-md: 1.0625rem; /* 17px — öne çıkan gövde */
  --tm-fs-lg: 1.25rem; /* 20px — kart başlığı */
  --tm-fs-xl: 1.5rem; /* 24px — bölüm başlığı */
  --tm-fs-2xl: 1.875rem; /* 30px — sayfa başlığı */
  --tm-fs-3xl: 2.375rem; /* 38px — hero */
  --tm-fs-4xl: 3rem; /* 48px — büyük hero */

  --tm-fw-regular: 400;
  --tm-fw-medium: 500;
  --tm-fw-semibold: 600;
  --tm-fw-bold: 700;
  --tm-fw-black: 800;

  --tm-lh-tight: 1.15;
  --tm-lh-snug: 1.35;
  --tm-lh-normal: 1.6;
  --tm-lh-relaxed: 1.75;

  --tm-ls-tight: -0.02em;
  --tm-ls-wide: 0.04em;
  --tm-ls-wider: 0.09em;

  /* --- Boşluk (4px adımlı) ----------------------------------------------- */
  --tm-space-1: 0.25rem;
  --tm-space-2: 0.5rem;
  --tm-space-3: 0.75rem;
  --tm-space-4: 1rem;
  --tm-space-5: 1.25rem;
  --tm-space-6: 1.5rem;
  --tm-space-8: 2rem;
  --tm-space-10: 2.5rem;
  --tm-space-12: 3rem;
  --tm-space-16: 4rem;
  --tm-space-20: 5rem;

  /* --- Köşe yarıçapı ----------------------------------------------------- */
  --tm-radius-xs: 3px;
  --tm-radius-sm: 5px;
  --tm-radius-md: 8px;
  --tm-radius-lg: 12px;
  --tm-radius-xl: 18px;
  --tm-radius-pill: 999px;

  /* --- Gölge ------------------------------------------------------------- */
  --tm-shadow-xs: 0 1px 2px rgba(11, 23, 37, 0.06);
  --tm-shadow-sm: 0 1px 3px rgba(11, 23, 37, 0.08), 0 1px 2px rgba(11, 23, 37, 0.04);
  --tm-shadow-md: 0 4px 12px rgba(11, 23, 37, 0.1);
  --tm-shadow-lg: 0 12px 28px rgba(11, 23, 37, 0.14);
  --tm-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* --- Yerleşim ---------------------------------------------------------- */
  --tm-container: 1280px;
  --tm-container-narrow: 880px;
  --tm-gutter: var(--tm-space-4);
  --tm-header-h: 64px;

  /* --- Hareket ----------------------------------------------------------- */
  --tm-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tm-transition-fast: 120ms var(--tm-ease);
  --tm-transition: 200ms var(--tm-ease);
  --tm-transition-slow: 420ms var(--tm-ease);

  /* --- Katman sırası ----------------------------------------------------- */
  --tm-z-base: 1;
  --tm-z-sticky: 100;
  --tm-z-dropdown: 200;
  --tm-z-overlay: 300;
  --tm-z-drawer: 400;
  --tm-z-toast: 500;
}

/* Kırılım noktaları (medya sorgularında birebir kullanılan değerler):
   sm 480px · md 768px · lg 1024px · xl 1280px */

@media (min-width: 768px) {
  :root {
    --tm-gutter: var(--tm-space-6);
    --tm-header-h: 80px;
  }
}