/* ZTO-HAL Design Tokens — Kapsamlı Tasarım Sistemi
   Based on: hal_ui.md — Modern tasarım sistemi önerileri
   Tarih: 9 Mayıs 2026
   Dil: Türkçe (UTF-8)
*/

:root {
  /* ============ PRIMARY COLORS — Kurumsal Yeşil (Karaali Grubu #0F2A1F) ============ */
  /* #0F2A1F taban; aksan/focus #1f7a4d. Tüm app bu zinciri besler (--hal-primary → 500). */
  --color-primary-50: #eef5f1;
  --color-primary-100: #d6e7dd;
  --color-primary-200: #aecdbb;
  --color-primary-300: #7fae93;
  --color-primary-400: #1f7a4d; /* Aksan / focus-ring (hal-auth.css ile aynı) */
  --color-primary-500: #0F2A1F; /* BASE - kurumsal koyu yeşil (buton dolgu, sidebar-active) */
  --color-primary-600: #163d2c; /* Hover - koyu zeminde görünür biraz açık */
  --color-primary-700: #0c2219; /* Dark hover */
  --color-primary-800: #081510;
  --color-primary-900: #050f0b;

  /* ============ SUCCESS COLORS — Onaylı/Tamamlanmış (Yeşil Tonları) ============ */
  /* Aligned with PurchaseCurrentAccount palette (#28a745 base) */
  --color-success-50: #f0fdf4;
  --color-success-100: #e0fce7;
  --color-success-200: #c0f7d5;
  --color-success-300: #8fefc3;
  --color-success-400: #4ade7d;
  --color-success-500: #28a745; /* BASE - PurchaseCurrentAccount success */
  --color-success-600: #1e7e34;
  --color-success-700: #15803d; /* Darker */
  --color-success-800: #0d5c2a;
  --color-success-900: #053d1a;

  /* ============ WARNING COLORS — Dikkat/Beklemede (Orange Tonları) ============ */
  /* Aligned with PurchaseCurrentAccount palette (#ffc107 base) */
  --color-warning-50: #fffbeb;
  --color-warning-100: #fff5d4;
  --color-warning-200: #ffeaa9;
  --color-warning-300: #ffdc7e;
  --color-warning-400: #ffce53;
  --color-warning-500: #ffc107; /* BASE - PurchaseCurrentAccount warning */
  --color-warning-600: #e0a800;
  --color-warning-700: #c19500;
  --color-warning-800: #a28100;
  --color-warning-900: #7d6400;

  /* ============ DANGER COLORS — Hata/Gecikmiş (Kırmızı Tonları) ============ */
  /* Aligned with PurchaseCurrentAccount palette (#dc3545 base) */
  --color-danger-50: #fef5f5;
  --color-danger-100: #fee2e4;
  --color-danger-200: #fdcccf;
  --color-danger-300: #fcb3ba;
  --color-danger-400: #fb99a5;
  --color-danger-500: #dc3545; /* BASE - PurchaseCurrentAccount danger */
  --color-danger-600: #c82333;
  --color-danger-700: #b21c2f;
  --color-danger-800: #9c1a2b;
  --color-danger-900: #661218;

  /* ============ INFO COLORS — Bilgilendirme (Cyan/Light Blue) ============ */
  /* Aligned with PurchaseCurrentAccount palette (#17a2b8 base) */
  --color-info-50: #f0f8fa;
  --color-info-100: #d5eef5;
  --color-info-200: #ace4f0;
  --color-info-300: #83daeb;
  --color-info-400: #5ad0e6;
  --color-info-500: #17a2b8; /* BASE - PurchaseCurrentAccount info */
  --color-info-600: #117a8b;
  --color-info-700: #0c5f73;
  --color-info-800: #07455b;
  --color-info-900: #042a3a;

  /* ============ BLUE COLORS — Vurgu (Mavi) ============ */
  /* Fabrika-parite çipler (plaka, müşteri, bölündü durumu) için; koddaki
     dağınık #dbeafe / #1d4ed8 değerleriyle hizalı (Tailwind blue skalası). */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;

  /* ============ GRAY COLORS — Neutral (Gri Tonları) ============ */
  /* Aligned with PurchaseCurrentAccount palette */
  --color-gray-50: #f8f9fa; /* PurchaseCurrentAccount light bg */
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #adb5bd;
  --color-gray-500: #6c757d; /* PurchaseCurrentAccount muted text */
  --color-gray-600: #5a6268;
  --color-gray-700: #495057;
  --color-gray-800: #212529; /* PurchaseCurrentAccount dark text */
  --color-gray-900: #111827; /* Darkest text */

  /* ============ SEMANTIC ALIASES — Metin Renkleri ============ */
  --color-text-primary: var(--color-gray-900); /* #111827 */
  --color-text-secondary: var(--color-gray-700); /* #374151 */
  --color-text-muted: var(--color-gray-500); /* #6b7280 */
  --color-text-light: var(--color-gray-400); /* #9ca3af */

  /* ============ SEMANTIC ALIASES — Arka Plan Renkleri ============ */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f7f9fc; /* cooler off-white */
  --color-bg-tertiary: var(--color-gray-100); /* #f3f4f6 */

  /* ============ SEMANTIC ALIASES — Kenar Renkleri ============ */
  --color-border: var(--color-gray-200); /* #e5e7eb */
  --color-border-light: var(--color-gray-100); /* #f3f4f6 */
  --color-border-dark: var(--color-gray-300); /* #d1d5db */

  /* ============ SEMANTIC ALIASES — Gölgeler ============ */
  --color-shadow-light: rgba(0, 0, 0, 0.04);
  --color-shadow-medium: rgba(0, 0, 0, 0.08);
  --color-shadow-dark: rgba(0, 0, 0, 0.12);

  /* ============ TYPOGRAPHY — Font Ailesi ============ */
  --font-family-base: "IBM Plex Sans", "Manrope", sans-serif;
  --font-family-display: "Manrope", sans-serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", monospace;

  /* ============ TYPOGRAPHY — Font Boyutları ============ */
  --font-size-xs: 11px; /* Captions, small labels */
  --font-size-sm: 12px; /* Form labels, small text */
  --font-size-base: 14px; /* Body text (standard) */
  --font-size-lg: 16px; /* Large body, input text */
  --font-size-xl: 18px; /* Card titles, subheadings */
  --font-size-2xl: 20px; /* Section titles */
  --font-size-3xl: 24px; /* Page subtitles */
  --font-size-4xl: 28px; /* Page titles */

  /* ============ TYPOGRAPHY — Font Kalınlıkları ============ */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ============ TYPOGRAPHY — Satır Yüksekliği ============ */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* ============ TYPOGRAPHY — Harf Aralığı ============ */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-wider: 0.08em;

  /* ============ SPACING — 8px Grid Sistemi ============ */
  --spacing-0: 0;
  --spacing-1: 4px; /* Smallest gap */
  --spacing-2: 8px; /* Compact spacing */
  --spacing-3: 12px; /* Default spacing */
  --spacing-4: 16px; /* Standard padding */
  --spacing-5: 20px; /* Card padding */
  --spacing-6: 24px; /* Section padding */
  --spacing-8: 32px; /* Large sections */
  --spacing-10: 40px; /* Page padding */
  --spacing-12: 48px; /* Extra large sections */

  /* ============ BORDER RADIUS — Köşe Yuvarlama ============ */
  --radius-none: 0;
  --radius-xs: 2px; /* Minimal rounding */
  --radius-sm: 4px; /* Small buttons, inputs */
  --radius-md: 8px; /* Cards, modals — premium soft-border */
  --radius-lg: 12px; /* Larger containers */
  --radius-xl: 16px; /* Large cards (Aura login premium) */
  --radius-2xl: 16px; /* Extra large, pills */
  --radius-full: 9999px; /* Fully rounded (pills, avatars) */

  /* ============ SHADOW — Elevation Sistemi ============ */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px var(--color-shadow-light);
  --shadow-sm:
    0 1px 3px var(--color-shadow-light), 0 1px 2px var(--color-shadow-light);
  --shadow-md:
    0 4px 6px var(--color-shadow-light), 0 2px 4px var(--color-shadow-light);
  --shadow-lg:
    0 10px 15px -3px var(--color-shadow-medium),
    0 4px 6px -2px var(--color-shadow-light);
  --shadow-xl:
    0 20px 25px -5px var(--color-shadow-medium),
    0 10px 10px -5px var(--color-shadow-light);
  --shadow-2xl: 0 25px 50px -12px var(--color-shadow-dark);
  --shadow-inner: inset 0 2px 4px var(--color-shadow-light);

  /* ============ Z-INDEX SCALE ============ */
  --z-dropdown: 1000;
  --z-sticky: 500;
  --z-fixed: 1000;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ============ ANIMATIONS — Geçiş Zamanlaması ============ */
  --animation-fast: 150ms ease-out;
  --animation-base: 200ms ease-out;
  --animation-slow: 300ms ease-out;

  /* ============ ADAPTİF TOKEN'LAR (dark-mode uyumlu inline renkler) ============
     LIGHT değerleri = eski hardcoded hex'lere BİREBİR eşit → light mode piksel-aynı kalır.
     Dark override'ları hal-dark.css'te. Inline `style="color:#1e293b"` vb. bu token'lara
     çevrildi (convert script) → tema-duyarlı olur, semantik/marka renkleri korunur. */
  --t-ink:          #1e293b;   /* koyu slate metin (#0f172a/#1e293b/#111827/#212529) */
  --t-slate:        #334155;   /* orta slate başlık (#334155/#374151) */
  --t-muted:        #64748b;   /* muted metin (#64748b/#6c757d/#475569) */
  --t-faint:        #94a3b8;   /* soluk metin (#94a3b8/#adb5bd/#cbd5e1/#9ca3af) */
  --t-navy:         #1e3a8a;   /* lacivert başlık aksanı (#1e3a8a/#1d4ed8) */
  --t-surface:      #ffffff;   /* beyaz yüzey (#fff/#ffffff) */
  --t-surface-alt:  #f8fafc;   /* açık yüzey (#f8fafc/#f8f9fa/#f1f5f9/#f7f9fc/#f9fafb) */
  --t-border:       #e2e8f0;   /* açık kenar (#e2e8f0/#e5e7eb/#dee2e6/#eef2f7/#e1e8ed) */
}

/* ============ BACKWARDS COMPATIBILITY — Eski değişkenlerin eşleştirilmesi ============ */
:root {
  /* HAL eski değişkenlerine dönüştürme */
  --hal-primary: var(--color-primary-500);
  --hal-color-primary: var(--color-primary-500);
  --hal-primary-light: var(--color-primary-600);
  --hal-accent: var(--color-warning-500);
  --hal-accent-soft: var(--color-warning-200);

  /* Status */
  --hal-status-draft: var(--color-gray-400);
  --hal-status-active: var(--color-primary-500);
  --hal-status-pending: var(--color-warning-500);
  --hal-status-done: var(--color-success-500);
  --hal-status-locked: var(--color-gray-500);
  --hal-status-cancelled: var(--color-danger-500);
  --hal-status-return: #b5179e;

  /* Yüzey */
  --hal-bg: var(--color-bg-secondary);
  --hal-surface: var(--color-bg-primary);
  --hal-surface-alt: var(--color-bg-tertiary);
  --hal-border: var(--color-border);
  --hal-border-strong: var(--color-border-dark);

  /* Metin */
  --hal-text: var(--color-text-primary);
  --hal-text-muted: var(--color-text-muted);
  --hal-text-on-primary: #ecfdf5;

  /* Tipografi */
  --hal-font: var(--font-family-base);
  --hal-font-display: var(--font-family-display);
  --hal-fs-xs: var(--font-size-xs);
  --hal-fs-sm: var(--font-size-sm);
  --hal-fs-base: var(--font-size-base);
  --hal-fs-lg: var(--font-size-lg);
  --hal-fs-xl: var(--font-size-xl);
  --hal-fs-2xl: var(--font-size-2xl);
  --hal-lh-tight: var(--line-height-tight);
  --hal-lh-base: var(--line-height-normal);
  --hal-fw-regular: var(--font-weight-normal);
  --hal-fw-medium: var(--font-weight-medium);
  --hal-fw-semibold: var(--font-weight-semibold);
  --hal-fw-bold: var(--font-weight-bold);

  /* Spacing */
  --hal-sp-1: var(--spacing-1);
  --hal-sp-2: var(--spacing-2);
  --hal-sp-3: var(--spacing-3);
  --hal-sp-4: var(--spacing-4);
  --hal-sp-5: var(--spacing-5);
  --hal-sp-6: var(--spacing-6);
  --hal-sp-7: var(--spacing-12);

  /* Shadow */
  --hal-shadow-sm: var(--shadow-xs);
  --hal-shadow: var(--shadow-md);
  --hal-shadow-md: var(--shadow-md);
  --hal-shadow-lg: var(--shadow-lg);

  /* Radius */
  --hal-r-sm: var(--radius-sm);
  --hal-r: var(--radius-md);
  --hal-r-lg: var(--radius-lg);
  --hal-r-pill: var(--radius-full);

  /* Touch target */
  --hal-touch: 48px;

  /* Transition */
  --hal-tr-fast: var(--animation-fast);
  --hal-tr-base: var(--animation-base);

  /* Sidebar */
  --hal-sidebar-bg: #0f172a;
  --hal-sidebar-text: #cbd5e1;
  --hal-sidebar-active: var(--color-primary-500);
  --hal-sidebar-hover: #1e293b;
  --hal-sidebar-width: 260px;

  /* Z-index */
  --hal-z-sidebar: 900;
  --hal-z-topbar:  800;
  --hal-z-modal: 1000;
  --hal-z-toast: 1100;
  --hal-topbar-height: 64px;
}