/**
 * ShieldCookie Design Tokens
 * Versiyon: 1.0 — 7 Nisan 2026
 *
 * Bu dosya ShieldCookie'nin tüm tasarım sistemi token'larını içerir.
 * WordPress plugin admin paneli, cloud dashboard, banner renderer ve
 * dokümantasyon sayfalarında bu değişkenler kullanılır.
 *
 * KRİTİK WCAG KURALI:
 * Turuncu (#F7931E) üzerine BEYAZ metin asla kullanılmaz (kontrast 2.30, FAIL).
 * Turuncu butonlar üzerinde her zaman LACİVERT metin (#1B1464) kullanılır (6.87, AA).
 */

:root {
  /* ============================================
   * MARKA RENKLERİ (Brand Colors)
   * ============================================ */

  /* Lacivert Ramp — Shield / Primary */
  --sc-navy-50:  #ECECF2;
  --sc-navy-100: #DCDBE7;
  --sc-navy-200: #BAB8D0;
  --sc-navy-300: #8D89B1;
  --sc-navy-400: #544E8A;
  --sc-navy-500: #1B1464;  /* ANA MARKA RENGİ */
  --sc-navy-600: #161155;
  --sc-navy-700: #120E46;
  --sc-navy-800: #0E0B37;
  --sc-navy-900: #0A0828;

  /* Turuncu Ramp — Cookie / Accent */
  --sc-orange-50:  #FEF6ED;
  --sc-orange-100: #FDEEDD;
  --sc-orange-200: #FCDEBB;
  --sc-orange-300: #FBC98E;
  --sc-orange-400: #F9AE56;
  --sc-orange-500: #F7931E;  /* AKSAN RENGİ */
  --sc-orange-600: #D17C19;
  --sc-orange-700: #AC6615;  /* Beyaz arka plan üzerinde metin için min */
  --sc-orange-800: #875010;
  --sc-orange-900: #623A0C;

  /* ============================================
   * SEMANTİK RENKLER (Semantic Colors)
   * ============================================ */

  --sc-brand-primary: var(--sc-navy-500);
  --sc-brand-accent:  var(--sc-orange-500);

  /* Durum renkleri */
  --sc-success: #059669;
  --sc-success-bg: #ECFDF5;
  --sc-warning: #D97706;
  --sc-warning-bg: #FFFBEB;
  --sc-danger:  #DC2626;
  --sc-danger-bg: #FEF2F2;
  --sc-info:    var(--sc-navy-500);
  --sc-info-bg: var(--sc-navy-50);

  /* WCAG durum rozeti */
  --sc-wcag-aaa: #166534;
  --sc-wcag-aaa-bg: #DCFCE7;
  --sc-wcag-aa:  #92400E;
  --sc-wcag-aa-bg: #FEF3C7;
  --sc-wcag-fail: #991B1B;
  --sc-wcag-fail-bg: #FEE2E2;

  /* ============================================
   * NÖTR RENKLER (Light Mode)
   * ============================================ */

  --sc-bg-primary:    #FFFFFF;
  --sc-bg-secondary:  #F8FAFC;
  --sc-bg-tertiary:   #F1F5F9;
  --sc-bg-elevated:   #FFFFFF;

  --sc-text-primary:   var(--sc-navy-900);
  --sc-text-secondary: #475569;
  --sc-text-tertiary:  #64748B;
  --sc-text-muted:     #94A3B8;
  --sc-text-on-brand:  #FFFFFF;          /* lacivert üstü */
  --sc-text-on-accent: var(--sc-navy-500); /* turuncu üstü — ASLA beyaz değil! */

  --sc-border-default: #E2E8F0;
  --sc-border-strong:  #CBD5E1;
  --sc-border-brand:   var(--sc-navy-500);

  /* ============================================
   * TİPOGRAFİ
   * ============================================ */

  --sc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sc-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Font ağırlıkları (sadece 400 ve 500 kullan, daha ağır asla) */
  --sc-weight-regular: 400;
  --sc-weight-medium:  500;

  /* Tipografi ölçeği */
  --sc-text-xs:   12px;
  --sc-text-sm:   13px;
  --sc-text-base: 14px;
  --sc-text-md:   15px;
  --sc-text-lg:   16px;
  --sc-text-xl:   18px;
  --sc-text-2xl:  22px;
  --sc-text-3xl:  28px;
  --sc-text-4xl:  36px;

  /* Satır yüksekliği */
  --sc-leading-tight:  1.25;
  --sc-leading-normal: 1.5;
  --sc-leading-relaxed: 1.7;

  /* ============================================
   * BOŞLUK (Spacing)
   * ============================================ */

  --sc-space-1:  4px;
  --sc-space-2:  8px;
  --sc-space-3:  12px;
  --sc-space-4:  16px;
  --sc-space-5:  20px;
  --sc-space-6:  24px;
  --sc-space-8:  32px;
  --sc-space-10: 40px;
  --sc-space-12: 48px;
  --sc-space-16: 64px;

  /* ============================================
   * KÖŞE YUVARLAMA (Border Radius)
   * ============================================ */

  --sc-radius-sm:   4px;
  --sc-radius-md:   8px;
  --sc-radius-lg:   12px;
  --sc-radius-xl:   16px;
  --sc-radius-full: 9999px;

  /* ============================================
   * GÖLGE (Shadows)
   * ============================================ */

  --sc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sc-shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sc-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --sc-shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.12);

  /* Marka focus rings */
  --sc-ring-brand:   0 0 0 3px rgba(27, 20, 100, 0.2);
  --sc-ring-accent:  0 0 0 3px rgba(247, 147, 30, 0.3);
  --sc-ring-danger:  0 0 0 3px rgba(220, 38, 38, 0.2);

  /* ============================================
   * GEÇİŞ (Transitions)
   * ============================================ */

  --sc-transition-fast:   150ms ease;
  --sc-transition-base:   200ms ease;
  --sc-transition-slow:   300ms ease;

  /* ============================================
   * Z-INDEX
   * ============================================ */

  --sc-z-dropdown: 1000;
  --sc-z-sticky:   1020;
  --sc-z-banner:   2147483645; /* maksimum yakını - banner her zaman üstte */
  --sc-z-modal:    2147483646;
  --sc-z-toast:    2147483647;
}

/* ============================================
 * DARK MODE
 * ============================================ */

@media (prefers-color-scheme: dark) {
  :root:not(.sc-force-light) {
    --sc-bg-primary:    var(--sc-navy-900);
    --sc-bg-secondary:  var(--sc-navy-800);
    --sc-bg-tertiary:   var(--sc-navy-700);
    --sc-bg-elevated:   var(--sc-navy-800);

    --sc-text-primary:   #F8FAFC;
    --sc-text-secondary: #CBD5E1;
    --sc-text-tertiary:  #94A3B8;
    --sc-text-muted:     #64748B;

    --sc-border-default: var(--sc-navy-700);
    --sc-border-strong:  var(--sc-navy-600);

    /* Dark mode'da turuncu üstü metin yine lacivert kalır
       (turuncu yeterince parlak olduğu için) */
    --sc-text-on-accent: var(--sc-navy-900);

    /* Durum renklerinin dark mode arka planları */
    --sc-success-bg: rgba(5, 150, 105, 0.15);
    --sc-warning-bg: rgba(217, 119, 6, 0.15);
    --sc-danger-bg:  rgba(220, 38, 38, 0.15);
    --sc-info-bg:    rgba(27, 20, 100, 0.3);
  }
}

.sc-force-dark {
  --sc-bg-primary:    var(--sc-navy-900);
  --sc-bg-secondary:  var(--sc-navy-800);
  --sc-bg-tertiary:   var(--sc-navy-700);
  --sc-bg-elevated:   var(--sc-navy-800);
  --sc-text-primary:   #F8FAFC;
  --sc-text-secondary: #CBD5E1;
  --sc-text-tertiary:  #94A3B8;
  --sc-border-default: var(--sc-navy-700);
  --sc-border-strong:  var(--sc-navy-600);
  --sc-text-on-accent: var(--sc-navy-900);
}

/* ============================================
 * BUTON SINIF ÖRNEKLERİ
 * Yazılımcıya rehber - aynısını component
 * library'ye kopyalayabilir
 * ============================================ */

/* PRIMARY: Lacivert + beyaz metin (15.78 AAA) */
.sc-btn-primary {
  background: var(--sc-brand-primary);
  color: var(--sc-text-on-brand);
  border: 1px solid var(--sc-brand-primary);
}
.sc-btn-primary:hover {
  background: var(--sc-navy-600);
  border-color: var(--sc-navy-600);
}

/* ACCENT: Turuncu + LACİVERT metin (6.87 AA)
   ⚠ ASLA bu butonda color: white kullanma! */
.sc-btn-accent {
  background: var(--sc-brand-accent);
  color: var(--sc-text-on-accent); /* lacivert */
  border: 1px solid var(--sc-brand-accent);
}
.sc-btn-accent:hover {
  background: var(--sc-orange-600);
  border-color: var(--sc-orange-600);
}

/* SECONDARY: Beyaz + lacivert metin/border (15.78 AAA) */
.sc-btn-secondary {
  background: var(--sc-bg-primary);
  color: var(--sc-brand-primary);
  border: 1px solid var(--sc-brand-primary);
}
.sc-btn-secondary:hover {
  background: var(--sc-navy-50);
}

/* GHOST: Sadece metin */
.sc-btn-ghost {
  background: transparent;
  color: var(--sc-brand-primary);
  border: 1px solid transparent;
}
.sc-btn-ghost:hover {
  background: var(--sc-navy-50);
}