/* =========================================================
   SETUP.TR — MERKEZİ TASARIM TOKENLARI (ui-tokens.css)

   Bu dosya, mevcut "kağıt + mürekkep" kimliğinin değişkenlerini
   TEK NOKTADAN yönetmek için vardır. Mevcut sayfaların (index.css,
   dashboard.css, user-flow.css, auth.css, admin-software.css)
   KENDİ `:root` DEĞERLERİNİ KORUMASINA RAĞMEN, yeni ortak
   bileşenler (ui-btn, ui-card, ui-field, vb.) BU DOSYADAKİ
   TOKENLARI KULLANACAKTIR.

   YENİ SAYFA / BİLEŞEN EKLEYEN GELİŞTİRİCİLER:
   - Rastgele renk, radius, shadow, spacing, font-size ÜRETMEYİN
   - Aşağıdaki tokenlardan seçin
   - Değişiklik gerekiyorsa BU DOSYAYI DÜZENLEYİN

   Mevcut üretim sayfalarının görselini BU AŞAMADA DEĞİŞTİRMEYİZ.

   İÇİNDEKİLER
      1.  Renkler (yüzey / metin / kenarlık)
      1b. Primary + Secondary
      2.  Yazı tipleri + yazı boyutu ölçeği
      3.  Boşluk ölçeği
      4.  Köşe yuvarlaklıkları
      5.  Gölge seviyeleri
      6.  Geçiş süreleri
      7.  Konteyner genişlikleri
      8.  Z-index katmanları
      9.  Erişilebilirlik — odak halkası
      10. Kontrol yükseklikleri
      11. Hareket azaltma (prefers-reduced-motion)
      12. Yardımcı sınıflar
   ========================================================= */

/* ---------------------------------------------------------
   1. RENKLER — Mevcut marka paletinden çıkarılmıştır
   --------------------------------------------------------- */

:root {
  /* Temel yüzeyler */
  --ui-color-bg-primary: #f8f6ef;       /* index.css --paper */
  --ui-color-bg-surface: #ffffff;       /* Beyaz kart/panel arka planı */
  --ui-color-bg-elevated: #f2efe7;      /* index.css --paper-2 */
  --ui-color-bg-overlay: rgba(248, 246, 239, 0.92); /* Navbar arka planı */
  --ui-color-bg-selected: #f1efe6;      /* Seçili kart / sekme arka planı */
  --ui-color-bg-inset: #f3f2ee;         /* İçerik gömülü alanlar (admin --bg-inset) */
  --ui-color-bg-frosted: rgba(255, 255, 255, 0.72); /* Yarı saydam yüzey (boş durum) */

  /* Koyu tema yüzeyleri (admin panelden) */
  --ui-color-bg-dark-base: #0b0b0c;
  --ui-color-bg-dark-surface: #121214;
  --ui-color-bg-dark-raised: #17171a;

  /* Metin renkleri */
  --ui-color-text-primary: #171717;     /* index.css --ink */
  --ui-color-text-secondary: #6d6a63;   /* index.css --muted */
  --ui-color-text-inverse: #ffffff;
  --ui-color-text-muted: #aaa79f;       /* index.css --soft-line */
  --ui-color-text-pencil: #777777;      /* user-flow.css --pencil */

  /* Kenarlıklar */
  --ui-color-border-primary: #242424;   /* index.css --line */
  --ui-color-border-secondary: #aaa79f; /* index.css --soft-line */
  --ui-color-border-light: #bdbdb8;     /* user-flow.css --line */
  --ui-color-border-focus: #171717;

  /* ---------------------------------------------------------
      1b. PRIMARY / SECONDARY (marka renkleri)

      setup.tr'nin dili "kağıt + mürekkep"tir: primary mürekkep
      siyahı, secondary kâğıt tonlarıdır. Buton, bağlantı ve vurgu
      rengi gerektiğinde BU İKİ token kullanılır.
      --------------------------------------------------------- */
  --ui-color-primary: #171717;              /* index.css --ink */
  --ui-color-primary-hover: #000000;
  --ui-color-primary-text: #ffffff;         /* primary üzerinde metin */
  --ui-color-primary-bg: #171717;           /* dolgulu primary yüzey */
  --ui-color-primary-border: #171717;       /* primary kenarlığı */
  --ui-color-primary-soft: rgba(23, 23, 23, 0.08); /* Hafif vurgu zemini */

  --ui-color-secondary: #6d6a63;            /* index.css --muted */
  --ui-color-secondary-hover: #4a4841;
  --ui-color-secondary-text: #171717;       /* secondary yüzey üzerinde metin */
  --ui-color-secondary-bg: #f2efe7;         /* index.css --paper-2 */
  --ui-color-secondary-border: #aaa79f;     /* index.css --soft-line */
  --ui-color-secondary-soft: rgba(109, 106, 99, 0.10);

  /*
      Marka takma adı.

      `--ui-color-brand` BİR DEĞİRİ ÇOĞALTMAZ; `--ui-color-primary`
      ile aynı kaynağı paylaşır. Yeni kodda `--ui-color-primary`
      tercih edilir; eski okumalar için bu isim korunur.
  */
  --ui-color-brand: var(--ui-color-primary);

  /* Anlamsal renkler */
  --ui-color-success: #2f7d32;
  --ui-color-success-bg: #f3fbf3;
  --ui-color-success-border: #2f7d32;

  --ui-color-warning: #a16207;
  --ui-color-warning-bg: #fffbe9;
  --ui-color-warning-border: #d98a2b;

  --ui-color-danger: #a1201a;
  --ui-color-danger-bg: #fff4f4;
  --ui-color-danger-border: #a1201a;
  --ui-color-danger-hover: #7d1712;
  --ui-color-danger-text: #a1201a;

  --ui-color-info: #0369a1;
  --ui-color-info-bg: #f0f9ff;
  --ui-color-info-border: #0369a1;

  /* Gölge */
  --ui-color-shadow: rgba(23, 23, 23, 0.12);      /* index.css --shadow */
  --ui-color-shadow-strong: rgba(23, 23, 23, 0.18);
  --ui-color-shadow-dark: rgba(0, 0, 0, 0.35);    /* Admin panel */

  /* ---------------------------------------------------------
     2. YAZI TİPİLERİ
     --------------------------------------------------------- */
  --ui-font-family-base: "Trebuchet MS", Arial, Helvetica, sans-serif;     /* Dashboard / user-flow */
  --ui-font-family-heading: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; /* Handwritten */
  --ui-font-family-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Admin / modern */
  --ui-font-family-mono: "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Yazı boyutu ölçeği */
  --ui-font-size-xs: 0.62rem;     /* ~10px */
  --ui-font-size-sm: 0.75rem;     /* ~12px */
  --ui-font-size-base: 0.875rem;  /* ~14px */
  --ui-font-size-md: 1rem;        /* ~16px */
  --ui-font-size-lg: 1.125rem;    /* ~18px */
  --ui-font-size-xl: 1.5rem;      /* ~24px */
  --ui-font-size-2xl: 2rem;       /* ~32px */
  --ui-font-size-3xl: clamp(2.25rem, 5.3vw, 5rem); /* Hero başlık */

  /* Satır yüksekliği */
  --ui-line-height-tight: 1.1;
  --ui-line-height-base: 1.5;
  --ui-line-height-relaxed: 1.6;

  /* ---------------------------------------------------------
     3. BOŞLUK ÖLÇEĞİ (4px bazlı)
     --------------------------------------------------------- */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;
  --ui-space-7: 48px;
  --ui-space-8: 64px;

  /* ---------------------------------------------------------
     4. KÖŞE YUVARLAKLIKLARI
     --------------------------------------------------------- */
  --ui-radius-none: 0;
  --ui-radius-sm: 2px;            /* index.css --radius */
  --ui-radius-md: 6px;
  --ui-radius-lg: 10px;
  --ui-radius-xl: 14px;
  --ui-radius-2xl: 22px;          /* auth.css --radius */
  --ui-radius-full: 999px;
  --ui-radius-organic: 12px 5px 9px 6px; /* Sketch kart köşeleri */

  /* ---------------------------------------------------------
     5. GÖLGE SEVİYELERİ
     --------------------------------------------------------- */
  --ui-shadow-1: 2px 2px 0 var(--ui-color-shadow);
  --ui-shadow-2: 4px 4px 0 var(--ui-color-shadow);
  --ui-shadow-3: 6px 6px 0 var(--ui-color-shadow);
  --ui-shadow-4: 8px 8px 0 var(--ui-color-shadow);
  --ui-shadow-5: 10px 10px 0 var(--ui-color-shadow);
  --ui-shadow-soft-1: 0 1px 2px var(--ui-color-shadow-dark);
  --ui-shadow-soft-2: 0 4px 8px var(--ui-color-shadow-dark);
  --ui-shadow-soft-3: 0 12px 32px var(--ui-color-shadow-dark);

  /* ---------------------------------------------------------
     6. GEÇİŞ SÜRELERİ
     --------------------------------------------------------- */
  --ui-transition-fast: 120ms ease;
  --ui-transition-base: 240ms cubic-bezier(0.2, 0.75, 0.25, 1); /* index.css --ease */
  --ui-transition-slow: 280ms ease;

  /* ---------------------------------------------------------
     7. KONTEYNER GENİŞLİKLERİ
     --------------------------------------------------------- */
  --ui-container-sm: 620px;
  --ui-container-md: 1180px;      /* index.css --container */
  --ui-container-lg: 1200px;      /* Dashboard / user-flow */
  --ui-container-xl: 1380px;      /* Hero genişliği */
  --ui-container-max: 1440px;     /* Admin panel */

  /* ---------------------------------------------------------
     8. Z-INDEX KATMANLARI
     --------------------------------------------------------- */
  --ui-z-dropdown: 10;
  --ui-z-sticky: 20;
  --ui-z-header: 40;
  --ui-z-sidebar: 45;
  --ui-z-modal-backdrop: 60;
  --ui-z-modal: 80;
  --ui-z-toast: 90;
  --ui-z-tooltip: 100;

  /* ---------------------------------------------------------
     9. ERİŞİLEBİLİRLİK — Odak halkası
     --------------------------------------------------------- */
  --ui-focus-ring-width: 3px;
  --ui-focus-ring-offset: 3px;
  --ui-focus-ring-color: var(--ui-color-border-focus);
  --ui-focus-ring-color-danger: var(--ui-color-danger);
}

/* ---------------------------------------------------------
   10. KONTROL YÜKSEKLİKLERİ

   Buton / input / select yüksekliği BURADAN yönetilir; bileşen
   dosyasında sabit piksel değeri YAZILMAZ.
   --------------------------------------------------------- */
:root {
  --ui-control-height-sm: 32px;    /* .ui-btn--sm */
  --ui-control-height-md: 40px;    /* .ui-btn */
  --ui-control-height-lg: 48px;    /* .ui-btn--lg */
  --ui-control-height-input: 44px; /* .ui-input / .ui-select (tek satır) */
}

/* ---------------------------------------------------------
   11. HAREKET AZALTMA

   NOT: Bu `@media` KURALIN DIŞINDA durur. `:root { … }` içine
   gömülürse ayrıştırma tarayıcıya kalır ve eski tarayıcılarda
   bütün `:root` bloğunu düşürebilir.

   `0.01ms` (sıfır DEĞİL): `transition: none` yazıldığında bazı
   akışlarda `transitionend` olayı hiç tetiklenmez.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-transition-fast: 0.01ms;
    --ui-transition-base: 0.01ms;
    --ui-transition-slow: 0.01ms;
  }
}

/* ---------------------------------------------------------
   12. YARDIMCI SINIFLAR — Tokenları doğrudan kullanmak için
   (İsteğe bağlı, HTML'de kullanım kolaylığı için)

   BUNLAR BİLEŞEN DEĞİLDİR: yeni bir "ui-kutu" benzeri sınıf
   eklemek yerine doğrudan token okumayı tercih edin.
   --------------------------------------------------------- */

/* Metin renkleri */
.ui-text-primary   { color: var(--ui-color-text-primary); }
.ui-text-secondary { color: var(--ui-color-text-secondary); }
.ui-text-muted     { color: var(--ui-color-text-muted); }
.ui-text-inverse   { color: var(--ui-color-text-inverse); }
.ui-text-success   { color: var(--ui-color-success); }
.ui-text-warning   { color: var(--ui-color-warning); }
.ui-text-danger    { color: var(--ui-color-danger); }
.ui-text-info      { color: var(--ui-color-info); }

/* Arka plan renkleri */
.ui-bg-primary     { background-color: var(--ui-color-bg-primary); }
.ui-bg-surface     { background-color: var(--ui-color-bg-surface); }
.ui-bg-elevated    { background-color: var(--ui-color-bg-elevated); }
.ui-bg-selected    { background-color: var(--ui-color-bg-selected); }
.ui-bg-success     { background-color: var(--ui-color-success-bg); }
.ui-bg-warning     { background-color: var(--ui-color-warning-bg); }
.ui-bg-danger      { background-color: var(--ui-color-danger-bg); }
.ui-bg-info        { background-color: var(--ui-color-info-bg); }

/* Kenarlık renkleri */
.ui-border-primary   { border-color: var(--ui-color-border-primary); }
.ui-border-secondary { border-color: var(--ui-color-border-secondary); }
.ui-border-success   { border-color: var(--ui-color-success-border); }
.ui-border-warning   { border-color: var(--ui-color-warning-border); }
.ui-border-danger    { border-color: var(--ui-color-danger-border); }
.ui-border-focus     { border-color: var(--ui-color-border-focus); }

/* Gölgeler */
.ui-shadow-1 { box-shadow: var(--ui-shadow-1); }
.ui-shadow-2 { box-shadow: var(--ui-shadow-2); }
.ui-shadow-3 { box-shadow: var(--ui-shadow-3); }
.ui-shadow-4 { box-shadow: var(--ui-shadow-4); }
.ui-shadow-5 { box-shadow: var(--ui-shadow-5); }

/* Border radius */
.ui-radius-sm    { border-radius: var(--ui-radius-sm); }
.ui-radius-md    { border-radius: var(--ui-radius-md); }
.ui-radius-lg    { border-radius: var(--ui-radius-lg); }
.ui-radius-xl    { border-radius: var(--ui-radius-xl); }
.ui-radius-full  { border-radius: var(--ui-radius-full); }
.ui-radius-organic { border-radius: var(--ui-radius-organic); }

/* Font aileleri */
.ui-font-base    { font-family: var(--ui-font-family-base); }
.ui-font-heading { font-family: var(--ui-font-family-heading); }
.ui-font-ui      { font-family: var(--ui-font-family-ui); }
.ui-font-mono    { font-family: var(--ui-font-family-mono); }

/* Font boyutları */
.ui-fs-xs  { font-size: var(--ui-font-size-xs); }
.ui-fs-sm  { font-size: var(--ui-font-size-sm); }
.ui-fs-base { font-size: var(--ui-font-size-base); }
.ui-fs-md  { font-size: var(--ui-font-size-md); }
.ui-fs-lg  { font-size: var(--ui-font-size-lg); }
.ui-fs-xl  { font-size: var(--ui-font-size-xl); }
.ui-fs-2xl { font-size: var(--ui-font-size-2xl); }
.ui-fs-3xl { font-size: var(--ui-font-size-3xl); }

/* Boşluk yardımcıları */
.ui-p-1 { padding: var(--ui-space-1); }
.ui-p-2 { padding: var(--ui-space-2); }
.ui-p-3 { padding: var(--ui-space-3); }
.ui-p-4 { padding: var(--ui-space-4); }
.ui-p-5 { padding: var(--ui-space-5); }
.ui-p-6 { padding: var(--ui-space-6); }

.ui-m-1 { margin: var(--ui-space-1); }
.ui-m-2 { margin: var(--ui-space-2); }
.ui-m-3 { margin: var(--ui-space-3); }
.ui-m-4 { margin: var(--ui-space-4); }
.ui-m-5 { margin: var(--ui-space-5); }
.ui-m-6 { margin: var(--ui-space-6); }

/*
   NOT: `.ui-gap-*` yardımcıları BURADA TANIMLANMAZ.
   Tek tanık yeri `ui-components.css` (bölüm 8) içindir; aynı
   kural iki dosyada yazılırsa hangisinin geçerli olduğu
   yükleme sırasına bağlı olur.
*/