/* ═══════════════════════════════════════════════════════════════
   SAFF SALT — "Volcanic & Ivory" Renk Sistemi v1.0
   Lüks gurme tuz markası için zamansız koyu renk sistemi.
   Yapı: referans token (palet) → semantik token (rol) → bileşen.
   Bileşenlerde HER ZAMAN semantik token kullanın; ham hex yalnızca
   bu dosyada yaşar. WCAG oranları ölçülmüştür (bkz. style guide).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── REFERANS TOKENLAR — Taş Rampası (Stone Ramp) ── */
  --saff-basalt-950:   #101010;  /* Bazalt Gecesi */
  --saff-volcanic-900: #0A0A0A;  /* Volkanik Taş — marka zemini */
  --saff-umber-850:    #201A15;  /* Kavrulmuş Umber */
  --saff-umber-800:    #161616;  /* Umber — kart zemini */
  --saff-oak-750:      #282019;  /* Tütsülenmiş Meşe (koyu) */
  --saff-oak-700:      #1F1F1F;  /* Tütsülenmiş Meşe */
  --saff-granite-600:  #3A342C;  /* Koyu Granit */
  --saff-slate-500:    #6E6A63;  /* Arduvaz */
  --saff-smoke-400:    #8F8F8F;  /* Duman Grisi */
  --saff-linen-300:    #C7BFAF;  /* Keten */
  --saff-ivory-200:    #EDEDED;  /* Doğal Fildişi — marka metni */
  --saff-crystal-100:  #F4EFE6;  /* Tuz Kristali */
  --saff-crystal-50:   #F9F6EF;  /* Kristal Işığı */

  /* ── REFERANS TOKENLAR — Metaller ── */
  --saff-gold-antique: #D4A43A;  /* Antika Altın — koyu tema vurgusu */
  --saff-brass:        #C5A880;  /* Fırçalanmış Pirinç */
  --saff-gold-aged:    #8B6B14;  /* Eskitilmiş Altın — açık tema vurgusu */
  --saff-bronze:       #6B5410;  /* Bronz Gölge */

  /* ── REFERANS TOKENLAR — Toprak & Organik ── */
  --saff-limestone:    #D9D2C4;  /* Kireçtaşı */
  --saff-travertine:   #CBBFA8;  /* Traverten */
  --saff-sand:         #C9B091;  /* Sıcak Kum */
  --saff-olive:        #7A7B52;  /* Zeytin Dalı */
  --saff-sage:         #8B9B7A;  /* Taze Otlar / Adaçayı */
  --saff-truffle:      #2E241C;  /* Siyah Trüf */
  --saff-terracotta:   #A85A4A;  /* Pişmiş Toprak */
  --saff-terracotta-lt:#C9705A;  /* Pişmiş Toprak — koyu zemin metni */
  --saff-ochre:        #BC7B3F;  /* Kavrulmuş Aşı Boyası */
  --saff-mist-blue:    #A79D8E;  /* Sicak Sis (eski mavi UI tonu emekli) */

  /* ── KATEGORİ TOKENLARI — koyu zeminde ≥4.5:1 ── */
  --saff-cat-classic:  #E7E0D2;  /* Klasik Tuz — sıcak fildişi */
  --saff-cat-pyramid:  #CFCCC2;  /* Piramit Tuz — mineral gri */
  --saff-cat-truffle:  #9C8064;  /* Trüf Tuzu — umber taupe */
  --saff-cat-herb:     #8B9B7A;  /* Otlu Tuz — adaçayı */
  --saff-cat-lemon:    #C4B268;  /* Limon & Kekik — mat limon kabuğu */
  --saff-cat-pea:      #8B93B8;  /* Mavi Kelebek — soluk menekşe */
  --saff-cat-hibiscus: #C0796E;  /* Hibiskus — tozlu gül */
  --saff-cat-smoked:   #8A7D72;  /* Tütsülenmiş — is dumanı */
  --saff-cat-cocktail: #A8B5A0;  /* Kokteyl — sise cami (sicaklastirildi) */
  --saff-cat-gift:     #C5A880;  /* Hediye Koleksiyonu — pirinç */
}

/* ═══════════════ KOYU TEMA (varsayılan marka teması) ═══════════════ */
:root,
[data-theme="dark"] {
  /* Zeminler */
  --bg-primary:      var(--saff-volcanic-900);
  --bg-secondary:    var(--saff-umber-850);
  --surface-elevated:var(--saff-oak-700);
  --surface-card:    var(--saff-umber-800);
  --surface-modal:   var(--saff-oak-750);
  --bg-hero:         var(--saff-basalt-950);
  --bg-footer:       var(--saff-basalt-950);

  /* Tipografi — kontrastlar Volkanik Taş üzerinde ölçüldü */
  --text-primary:    var(--saff-ivory-200);   /* 14.8:1 AAA */
  --text-secondary:  var(--saff-linen-300);   /*  9.9:1 AAA */
  --text-muted:      var(--saff-smoke-400);   /*  4.8:1 AA  */
  --text-disabled:   var(--saff-slate-500);   /*  3.4:1 — bilinçli */
  --text-heading:    var(--saff-crystal-100);
  --text-link:       var(--saff-gold-antique);/*  7.9:1 AAA-large */

  /* Etkileşim */
  --btn-primary-bg:      var(--saff-ivory-200);
  --btn-primary-text:    var(--saff-volcanic-900);
  --btn-primary-hover:   var(--saff-crystal-50);
  --btn-secondary-bg:    transparent;
  --btn-secondary-border:rgba(255, 255, 255, 0.18);
  --btn-secondary-hover: rgba(255, 255, 255, 0.06);
  --btn-outline-border:  var(--saff-brass);
  --state-active:        var(--saff-gold-antique);
  --state-focus:         var(--saff-gold-antique);
  --focus-ring:          0 0 0 2px var(--saff-volcanic-900), 0 0 0 4px var(--saff-gold-antique);
  --selection-bg:        rgba(212, 164, 58, 0.28);
  --selection-text:      var(--saff-crystal-100);

  /* Vurgular */
  --accent-primary:   var(--saff-gold-antique);
  --accent-secondary: var(--saff-brass);
  --accent-organic:   var(--saff-sage);

  /* Kenarlıklar — sert kontrast olmadan ayrım */
  --border-hairline: rgba(255, 255, 255, 0.07);
  --border-default:  rgba(255, 255, 255, 0.12);
  --border-strong:   rgba(255, 255, 255, 0.20);
  --border-gold:     rgba(212, 164, 58, 0.32);

  /* Durum renkleri — mat, doğal tonlar */
  --status-success:      var(--saff-sage);        /* 6.1:1 */
  --status-success-bg:   rgba(139, 155, 122, 0.10);
  --status-warning:      var(--saff-ochre);       /* 5.2:1 */
  --status-warning-bg:   rgba(188, 123, 63, 0.10);
  --status-error:        var(--saff-terracotta-lt);/* 5.1:1 */
  --status-error-bg:     rgba(168, 90, 74, 0.12);
  --status-info:         var(--saff-mist-blue);   /* 6.9:1 */
  --status-info-bg:      rgba(143, 163, 176, 0.08);

  /* Gölgeler — yumuşak derinlik, yüzen kart efekti yok */
  --shadow-1: 0 1px 2px rgba(8, 6, 4, 0.30);
  --shadow-2: 0 2px 6px rgba(8, 6, 4, 0.28), 0 8px 24px rgba(8, 6, 4, 0.22);
  --shadow-3: 0 4px 12px rgba(8, 6, 4, 0.35), 0 16px 48px rgba(8, 6, 4, 0.30);

  /* Gradyanlar — taş, mineral, doğal ışık */
  --grad-stone:      linear-gradient(180deg, #161616 0%, #0A0A0A 100%);
  --grad-fog:        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.05), transparent 62%);
  --grad-brass:      linear-gradient(135deg, #C5A880 0%, #D4A43A 100%);
  --grad-crystal:    linear-gradient(180deg, rgba(244,239,230,0.06) 0%, transparent 100%);
  --grad-mist:       linear-gradient(180deg, #0A0A0A 0%, #101010 100%);
}

/* ═══════════════ AÇIK TEMA (eşleşen gündüz paleti) ═══════════════ */
[data-theme="light"] {
  --bg-primary:      #FCFCFC;   /* Fildişi Keten */
  --bg-secondary:    #F4F0E7;   /* Yıkanmış Keten */
  --surface-elevated:#FFFFFF;   /* Kağıt Beyazı (saf beyaz değil) */
  --surface-card:    #FFFFFF;
  --surface-modal:   #FFFFFF;
  --bg-hero:         #F5F5F5;   /* Sabah Işığı */
  --bg-footer:       var(--saff-volcanic-900); /* koyu çapa korunur */

  --text-primary:    #0A0A0A;   /* 16.4:1 AAA */
  --text-secondary:  #4A453C;   /*  9.0:1 AAA */
  --text-muted:      #8F8F8F;   /*  3.4:1 — yalnız büyük/ikincil */
  --text-disabled:   #B5AFA3;
  --text-heading:    #0A0A0A;
  --text-link:       var(--saff-gold-aged);   /* 4.7:1 AA */

  --btn-primary-bg:      #0A0A0A;
  --btn-primary-text:    var(--saff-crystal-50);
  --btn-primary-hover:   #35302A;
  --btn-secondary-bg:    transparent;
  --btn-secondary-border:rgba(0, 0, 0, 0.20);
  --btn-secondary-hover: rgba(0, 0, 0, 0.04);
  --btn-outline-border:  var(--saff-gold-aged);
  --state-active:        var(--saff-gold-aged);
  --state-focus:         var(--saff-gold-aged);
  --focus-ring:          0 0 0 2px #FCFCFC, 0 0 0 4px var(--saff-gold-aged);
  --selection-bg:        rgba(139, 107, 20, 0.18);
  --selection-text:      #0A0A0A;

  --accent-primary:   var(--saff-gold-aged);
  --accent-secondary: var(--saff-bronze);
  --accent-organic:   var(--saff-olive);

  --border-hairline: rgba(0, 0, 0, 0.06);
  --border-default:  rgba(0, 0, 0, 0.10);
  --border-strong:   rgba(0, 0, 0, 0.18);
  --border-gold:     rgba(139, 107, 20, 0.30);

  --status-success:      #5F7A52;
  --status-success-bg:   rgba(95, 122, 82, 0.08);
  --status-warning:      #96601F;
  --status-warning-bg:   rgba(150, 96, 31, 0.08);
  --status-error:        #9C4B3B;
  --status-error-bg:     rgba(156, 75, 59, 0.08);
  --status-info:         #6E6E6E;
  --status-info-bg:      rgba(110, 104, 94, 0.08);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.05), 0 10px 28px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.07), 0 20px 56px rgba(0, 0, 0, 0.09);

  --grad-stone:      linear-gradient(180deg, #FCFCFC 0%, #F1EEE4 100%);
  --grad-fog:        radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.03), transparent 62%);
  --grad-brass:      linear-gradient(135deg, #8B6B14 0%, #C5A880 100%);
  --grad-crystal:    linear-gradient(180deg, #FFFFFF 0%, #F4F0E7 100%);
  --grad-mist:       linear-gradient(180deg, #F5F5F5 0%, #EFEBE0 100%);
}

/* ── Seçim rengi (global) ── */
::selection { background: var(--selection-bg); color: var(--selection-text); }

/* ── Elevation sistemi (2026-07-10): 4 seviye + koyu esleri ── */
:root{
  --elev-1: 0 2px 8px rgba(0,0,0,0.06);
  --elev-2: 0 8px 32px rgba(0,0,0,0.10);
  --elev-3: 0 12px 40px rgba(0,0,0,0.12);
  --elev-4: 0 24px 64px rgba(0,0,0,0.18);
  --elev-dark-1: 0 2px 8px rgba(0,0,0,0.40);
  --elev-dark-2: 0 8px 32px rgba(0,0,0,0.40);
  --elev-dark-3: 0 12px 40px rgba(0,0,0,0.50);
  --elev-dark-4: 0 24px 64px rgba(0,0,0,0.60);
  /* Tip olcegi — 12 adim (yeni bilesenler BUNLARI kullanir) */
  --text-1:11px; --text-2:12px; --text-3:13px; --text-4:14px; --text-5:15px;
  --text-6:17px; --text-7:19px; --text-8:22px; --text-9:26px; --text-10:32px;
  --display-md: clamp(32px, 4.6vw, 56px);
  --display-lg: clamp(40px, 5.5vw, 68px);
  /* Koyu tema yuzey tokenlari */
  --dk-bg:#0A0A0A; --dk-surface:#161616; --dk-surface-2:#1F1F1F;
  --dk-cream:#EDEDED; --dk-line:rgba(255,255,255,.12);
}