/* ============================================================
   tokens.css — Merkezi Tasarım Token'ları
   ────────────────────────────────────────────────────────────
   Tema:    gypsy_pwa  (Gypsy Restaurant — Turunç, Marmaris)
   Palet:   Bohemian Sunset
            Şarap-aubergine zemin + terracotta + bordo wine + olive
   
   YAPILANDIRMA:
   - Tüm CSS değişkenleri (renk, tipografi, boşluk, köşe) burada.
   - Birincil prefix: --br-*
   - Geriye uyumluluk: --gr-* alias'ları korunur
   - Bu dosya header.php'de EN BAŞTA yüklenir.
============================================================ */

:root {
    /* ─────────────────────────────────────
       RENK — Zemin (warm dark wine/aubergine)
       ───────────────────────────────────── */
    --br-bg-1: #1a0e1a;          /* Ana koyu — şarap-mor */
    --br-bg-2: #15091a;          /* Daha derin (header, footer üst) */
    --br-bg-3: #2a1622;          /* Kestane-bordo (cards) */
    --br-bg-4: #0a040a;          /* En derin (footer alt) */
    --br-bg-elev: rgba(217, 136, 60, 0.06);  /* Yükseltilmiş yüzey, terracotta tint */

    /* ─────────────────────────────────────
       RENK — Krem (yazı katmanları)
       ───────────────────────────────────── */
    --br-cream: #fef3e8;
    --br-cream-soft:  rgba(254, 243, 232, 0.80);
    --br-cream-muted: rgba(254, 243, 232, 0.60);
    --br-cream-dim:   rgba(254, 243, 232, 0.40);
    --br-cream-faint: rgba(254, 243, 232, 0.18);

    /* ─────────────────────────────────────
       RENK — Terracotta / Copper (primary aksan)
       ───────────────────────────────────── */
    --br-gold:        #D9883C;     /* Ana aksan — terracotta/copper */
    --br-gold-light:  #E5A05F;     /* Hover */
    --br-gold-dark:   #B36A28;     /* Active/pressed */
    --br-gold-deep:   #7A4A1C;     /* Çok koyu vurgu */
    --br-gold-soft:   rgba(217, 136, 60, 0.10);
    --br-gold-line:   rgba(217, 136, 60, 0.22);
    --br-gold-glow:   rgba(217, 136, 60, 0.45);

    /* ─────────────────────────────────────
       RENK — Wine / Garnet (YENİ — sunset gradient eşi)
       ───────────────────────────────────── */
    --br-wine:        #A03252;     /* Deep wine/garnet */
    --br-wine-light:  #BB4D6F;     /* Hover */
    --br-wine-dark:   #6E2238;     /* Pressed */
    --br-wine-soft:   rgba(160, 50, 82, 0.10);
    --br-wine-line:   rgba(160, 50, 82, 0.22);
    --br-wine-glow:   rgba(160, 50, 82, 0.40);

    /* ─────────────────────────────────────
       RENK — Olive (YENİ — 3. aksan, sahil deneyimi)
       ───────────────────────────────────── */
    --br-olive:       #7A8C4A;
    --br-olive-light: #95A864;
    --br-olive-dark:  #5C6B36;
    --br-olive-soft:  rgba(122, 140, 74, 0.20);

    /* ─────────────────────────────────────
       GRADIENT — Sunset (ana brand gradient)
       Terracotta → wine — CTA, brand-mark, cart pill, FAB
       ───────────────────────────────────── */
    --br-grad-sunset:        linear-gradient(135deg, #D9883C 0%, #A03252 100%);
    --br-grad-sunset-soft:   linear-gradient(135deg, rgba(217,136,60,0.12) 0%, rgba(160,50,82,0.12) 100%);
    --br-grad-sunset-radial: radial-gradient(ellipse at center top, rgba(160,50,82,0.25) 0%, transparent 60%);

    /* ─────────────────────────────────────
       LEGACY ACCENT (kademeli kaldırılacak — eski view'lar için)
       ───────────────────────────────────── */
    --br-orange:       var(--br-gold);
    --br-orange-dark:  var(--br-wine-dark);
    --br-orange-light: var(--br-gold-light);
    --br-orange-soft:  var(--br-gold-soft);
    --br-accent:       var(--br-gold);
    --br-accent-dark:  var(--br-wine);

    /* ─────────────────────────────────────
       RENK — Kullanım yardımcıları
       ───────────────────────────────────── */
    --br-text-on-primary: #fef3e8;

    /* ─────────────────────────────────────
       TİPOGRAFİ
       ───────────────────────────────────── */
    --br-font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --br-font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ─────────────────────────────────────
       BOŞLUK RİTMİ
       ───────────────────────────────────── */
    --br-space-xs: 4px;
    --br-space-sm: 8px;
    --br-space-md: 14px;
    --br-space-lg: 22px;
    --br-space-xl: 32px;

    /* ─────────────────────────────────────
       KÖŞE YUVARLATMA
       ───────────────────────────────────── */
    --br-radius-sm:   8px;
    --br-radius-md:   12px;
    --br-radius-lg:   18px;
    --br-radius-pill: 999px;

    /* ============================================================
       GERIYE UYUMLULUK — --gr-* alias'ları
       ────────────────────────────────────────────────────────────
       Eski --gr-* kullanımları çalışmaya devam eder.
       Yeni kod yazarken --br-* tercih edin.
    ============================================================ */
    --gr-primary:         var(--br-gold);
    --gr-primary-dark:    var(--br-wine-dark);
    --gr-primary-light:   var(--br-gold-light);
    --gr-accent:          var(--br-gold);
    --gr-accent-dark:     var(--br-wine);
    --gr-cream:           var(--br-cream);
    --gr-cream-muted:     var(--br-cream-muted);
    --gr-cream-dim:       var(--br-cream-dim);
    --gr-bg-1:            var(--br-bg-1);
    --gr-bg-2:            var(--br-bg-2);
    --gr-bg-3:            var(--br-bg-3);
    --gr-text-on-primary: var(--br-text-on-primary);
}