/* ==========================================================================
   TOKENS.CSS
   CRM İstek/Talep Modülü — Kurumsal Tasarım Sistemi
   Global + Alias token katmanı. Bu dosyada TEK BİR PIXEL/HEX değeri
   component seviyesinde tekrar tanımlanmaz — her bileşen buradaki
   değişkenlere referans verir (Fluent 2 / ResourceDictionary mantığı).

   Katmanlar:
     1) :root            -> Light mode alias tokenları (varsayılan tema)
     2) [data-theme="dark"] -> Dark mode alias tokenları (aynı isimler,
        farklı hedef — tema değişimi = değişken swap, DOM yeniden kurulmaz)
     3) Typography / Spacing / Grid / Elevation -> tema bağımsız, tek katman
   ========================================================================== */

:root {
  /* ---- Primary ---- */
  --color-primary: #0F6CBD;
  --color-primary-hover: #115EA3;
  --color-primary-pressed: #0C4A80;
  --color-secondary: #6E6E6E;

  /* ---- Surfaces ---- */
  --color-surface: #F5F5F5;        /* uygulama genel arka planı */
  --color-surface-alt: #FAFAFA;    /* panel / sidebar arka planı */
  --color-card: #FFFFFF;           /* kartlar, liste satırı, modal içerikleri */
  --color-canvas: #EDEDED;         /* en alt katman, boşluk alanları */

  /* ---- Semantic ---- */
  --color-success: #0F7B0F;
  --color-success-bg: #DFF6DD;
  --color-warning: #9D5D00;
  --color-warning-bg: #FFF4CE;
  --color-danger: #C42B1C;
  --color-danger-bg: #FDE7E9;
  --color-info: #005FB8;
  --color-info-bg: #E5F2FF;

  /* ---- States ---- */
  --color-disabled-text: #A19F9D;
  --color-disabled-bg: #F3F2F1;
  --color-selection-bg: #E8F1FB;
  --color-hover-bg: #F3F3F3;
  --color-pressed-bg: #EBEBEB;
  --color-focus-ring: #0F6CBD;

  /* ---- Borders / Dividers ---- */
  --color-border: #E1E1E1;
  --color-border-strong: #D1D1D1;
  --color-divider: #EDEBE9;

  /* ---- Text ---- */
  --color-text-primary: #242424;
  --color-text-secondary: #616161;
  --color-text-tertiary: #8A8886;
  --color-text-on-primary: #FFFFFF;

  /* ---- Durum (Ticket Status) — domain-specific, genel semantik ile 1:1 değil ---- */
  --status-new: #005FB8;
  --status-new-bg: #E5F2FF;
  --status-open: #0F6CBD;
  --status-open-bg: #E8F1FB;
  --status-inprogress: #9D5D00;
  --status-inprogress-bg: #FFF4CE;
  --status-pending: #6E6E6E;
  --status-pending-bg: #F3F2F1;
  --status-resolved: #0F7B0F;
  --status-resolved-bg: #DFF6DD;
  --status-closed: #8A8886;
  --status-closed-bg: #F3F2F1;
  --status-cancelled: #C42B1C;
  --status-cancelled-bg: #FDE7E9;

  /* ---- Öncelik (Priority) ---- */
  --priority-critical: #C42B1C;
  --priority-high: #CA5010;
  --priority-medium: #9D5D00;
  --priority-low: #0F7B0F;

  /* ---- Elevation (shadow) — 5 seviye, bkz. Bölüm 1.5 ---- */
  --elevation-0: none;
  --elevation-1: 0 1px 4px rgba(0, 0, 0, 0.06);
  --elevation-2: 0 2px 8px rgba(0, 0, 0, 0.10);
  --elevation-3: 0 4px 16px rgba(0, 0, 0, 0.14);
  --elevation-4: 0 8px 32px rgba(0, 0, 0, 0.20);

  /* ---- Dashboard kart üst-vurgu şeridi gradienti (tek gradient kullanım yeri #1) ---- */
  --gradient-card-accent: linear-gradient(90deg, var(--color-primary) 0%, rgba(15, 108, 189, 0.7) 100%);
  /* Empty state illüstrasyon zemini (tek gradient kullanım yeri #2) */
  --gradient-empty-state: radial-gradient(circle at 50% 40%, rgba(15, 108, 189, 0.08), transparent 70%);
}

/* ==========================================================================
   DARK MODE — aynı alias isimleri, farklı hedef değerler.
   Not: Dark modda hiçbir zaman saf #FFFFFF metin kullanılmaz (halo etkisi);
   en açık ton #F5F5F5 ile sınırlıdır.
   ========================================================================== */
[data-theme="dark"] {
  --color-primary: #4CB2F5;
  --color-primary-hover: #6BC1F7;
  --color-primary-pressed: #3A9EDE;
  --color-secondary: #9E9E9E;

  --color-surface: #1F1F1F;
  --color-surface-alt: #252525;
  --color-card: #2D2D2D;
  --color-canvas: #141414;

  --color-success: #6CCB5F;
  --color-success-bg: #0F2E0F;
  --color-warning: #FCE100;
  --color-warning-bg: #3B2E00;
  --color-danger: #F1707B;
  --color-danger-bg: #3B1213;
  --color-info: #60B3F0;
  --color-info-bg: #0D2A44;

  --color-disabled-text: #6B6B6B;
  --color-disabled-bg: #333333;
  --color-selection-bg: #0F3A5F;
  --color-hover-bg: #333333;
  --color-pressed-bg: #3D3D3D;
  --color-focus-ring: #4CB2F5;

  --color-border: #3D3D3D;
  --color-border-strong: #4A4A4A;
  --color-divider: #3B3B3B;

  --color-text-primary: #F5F5F5;
  --color-text-secondary: #C8C6C4;
  --color-text-tertiary: #9E9E9E;
  --color-text-on-primary: #1F1F1F;

  --status-new: #60B3F0;
  --status-new-bg: #0D2A44;
  --status-open: #4CB2F5;
  --status-open-bg: #0F3A5F;
  --status-inprogress: #FCE100;
  --status-inprogress-bg: #3B2E00;
  --status-pending: #9E9E9E;
  --status-pending-bg: #333333;
  --status-resolved: #6CCB5F;
  --status-resolved-bg: #0F2E0F;
  --status-closed: #9E9E9E;
  --status-closed-bg: #333333;
  --status-cancelled: #F1707B;
  --status-cancelled-bg: #3B1213;

  --priority-critical: #F1707B;
  --priority-high: #FF9D5C;
  --priority-medium: #FCE100;
  --priority-low: #6CCB5F;

  --elevation-1: 0 1px 4px rgba(0, 0, 0, 0.35);
  --elevation-2: 0 2px 8px rgba(0, 0, 0, 0.40);
  --elevation-3: 0 4px 16px rgba(0, 0, 0, 0.45);
  --elevation-4: 0 8px 32px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   TYPOGRAPHY — tema bağımsız tek katman (bkz. Bölüm 2)
   Taban 14px — yoğun liste/tablo ekranları için endüstri standardı.
   ========================================================================== */
:root {
  --font-family: -apple-system, "SF Pro Text", "Segoe UI Variable", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-size-display: 28px;   --line-height-display: 36px;  --font-weight-display: 600;
  --font-size-title1: 22px;    --line-height-title1: 28px;   --font-weight-title1: 600;
  --font-size-title2: 18px;    --line-height-title2: 24px;   --font-weight-title2: 600;
  --font-size-title3: 15px;    --line-height-title3: 20px;   --font-weight-title3: 600;
  --font-size-subtitle: 14px;  --line-height-subtitle: 20px; --font-weight-subtitle: 500;
  --font-size-body: 14px;      --line-height-body: 20px;     --font-weight-body: 400;
  --font-size-body-strong: 14px; --line-height-body-strong: 20px; --font-weight-body-strong: 600;
  --font-size-caption1: 12px;  --line-height-caption1: 16px; --font-weight-caption1: 400;
  --font-size-caption2: 11px;  --line-height-caption2: 14px; --font-weight-caption2: 400;
  --font-size-tooltip: 12px;   --line-height-tooltip: 16px;  --font-weight-tooltip: 400;

  /* Rozet metni: 11px Semibold, all-caps DEĞİL (TR İ/I sorunu), +0.2px tracking */
  --font-size-badge: 11px;
  --font-weight-badge: 600;
  --letter-spacing-badge: 0.2px;
}

/* ==========================================================================
   SPACING — 4px baz birim, 8 adımlı ölçek (bkz. Bölüm 3)
   Serbest px değeri hiçbir yerde kullanılmaz; her şey buradan seçilir.
   ========================================================================== */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* Yoğun liste kuralı: satır dikey padding'i skaladan değil, satır
     yüksekliği hedefinden tersine hesaplanır (bkz. Bölüm 6.1) */
  --row-padding-y-compact: 6px;   /* tek satır kompakt liste: 32px toplam yükseklik */
  --row-padding-y-two-line: 6px;  /* iki satırlı liste: 52px toplam yükseklik */
}

/* ==========================================================================
   RADIUS — Fluent karakteristik: küçük, keskin köşeye yakın (tam yuvarlak değil)
   ========================================================================== */
:root {
  --radius-sm: 4px;   /* rozet / chip / input */
  --radius-md: 6px;   /* kart / buton */
  --radius-lg: 8px;   /* modal / popover */
  --radius-pill: 999px; /* avatar, dot */
}

/* ==========================================================================
   GRID / BREAKPOINTS (bkz. Bölüm 4)
   ========================================================================== */
:root {
  --bp-compact: 599px;    /* < 600px  : telefon portrait */
  --bp-medium: 904px;     /* 600–904  : telefon landscape / küçük tablet */
  --bp-expanded: 1239px;  /* 905–1239 : tablet landscape / küçük masaüstü */
  --bp-large: 1439px;     /* 1240–1439: standart masaüstü */
  /* >= 1440px XLarge */

  --content-margin-compact: 16px;
  --content-margin-medium: 20px;
  --content-margin-expanded: 24px;
  --content-margin-large: 24px;
  --content-margin-xlarge: 32px;

  --gutter-compact: 8px;
  --gutter-medium: 12px;
  --gutter-expanded: 16px;
  --gutter-large: 16px;
  --gutter-xlarge: 24px;

  /* Page Shell sabit yükseklikler (bkz. Bölüm 5) */
  --header-height: 56px;
  --toolbar-height: 44px;
  --filter-height: 48px;
  --filter-collapsed-height: 32px;
  --action-height: 36px;
  --footer-height: 32px;
  --fab-size: 56px;

  /* Master-Detail (Bölüm 4.3) */
  --drawer-width: 240px;
  --drawer-collapsed-width: 56px;
  --list-panel-min: 360px;
  --list-panel-max: 35%;
}

/* ==========================================================================
   MOTION — 200ms üzeri animasyon yasak (bkz. Bölüm 13). Transform/scale yok.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-hover: 100ms;
  --duration-press: 80ms;
  --duration-transition: 150ms;
  --duration-expand: 200ms;
  --duration-page-fade: 120ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-hover: 0ms;
    --duration-press: 0ms;
    --duration-transition: 0ms;
    --duration-expand: 0ms;
    --duration-page-fade: 0ms;
  }
}