/* ============================================================ tokens.css — Merkezi Tasarım Token'ları ──────────────────────────────────────────────────────────── Tema: sportsbar_pwa (Pitch Green — yeni canlı palet) Palet: Pitch Green Vivid (homepage + product + category) v2 (2026-05-06): Mockup 02-product + 03-category'den gelen daha canlı palete güncellendi. - Pitch primary : #0E3A2A → #0B4F2E (daha canlı) - Amber : #F5A623 → #FFB627 (daha sarımsı) - Neon (live red): #D9501E → #FF6B35 (parlak neon) 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. DARK / LIGHT THEME: - Anasayfa (home.php) DARK: body bg = --br-bg-1 (pitch green) - Diğer sayfalar LIGHT: body bg = --br-cream (foam) - class'ına is-home / is-content eklenir. ============================================================ */ :root { /* ───────────────────────────────────── RENK — Zemin (pitch green vivid) ───────────────────────────────────── */ --br-bg-1: #0B4F2E; /* Pitch primary — canlı saha yeşili */ --br-bg-2: #052F1D; /* Pitch deep — header üstü, footer üst */ --br-bg-3: #2D7A4F; /* Pitch light — açık saha, accent yeşil */ --br-bg-4: #021F12; /* En derin */ --br-bg-jet: #0A0A0A; /* Pure black — pull quote, badge bg */ --br-bg-elev: rgba(255, 182, 39, 0.06); /* ───────────────────────────────────── RENK — Foam Cream (light theme zemin) ───────────────────────────────────── */ --br-cream: #F5EDD8; /* Ana foam — light body bg */ --br-cream-warm: #ECE2CB; /* Warm — card bg */ --br-cream-deep: #DDD0B0; /* Deep — borders, dividers */ --br-cream-soft: rgba(245, 237, 216, 0.80); --br-cream-muted: rgba(245, 237, 216, 0.60); --br-cream-dim: rgba(245, 237, 216, 0.40); --br-cream-faint: rgba(245, 237, 216, 0.18); /* ───────────────────────────────────── RENK — Amber (primary accent) Token adı --br-gold-* korundu. Değer: parlak amber/sarı — fiyat, vurgu, "BEER". ───────────────────────────────────── */ --br-gold: #FFB627; /* Ana aksan — amber */ --br-gold-light: #FFC04D; /* Hover */ --br-gold-dark: #C77E15; /* Active/pressed */ --br-gold-deep: #8C5810; /* Çok koyu vurgu */ --br-gold-soft: rgba(255, 182, 39, 0.10); --br-gold-line: rgba(255, 182, 39, 0.22); --br-gold-glow: rgba(255, 182, 39, 0.45); /* ───────────────────────────────────── RENK — Neon Red-Orange (secondary contrast) Token adı --br-wine-* korundu. Değer: parlak neon — LIVE, "MATCH", checkout, CTA. ───────────────────────────────────── */ --br-wine: #FF6B35; /* Neon red-orange */ --br-wine-light: #FF8755; /* Hover */ --br-wine-dark: #C24A1A; /* Pressed */ --br-wine-soft: rgba(255, 107, 53, 0.10); --br-wine-line: rgba(255, 107, 53, 0.22); --br-wine-glow: rgba(255, 107, 53, 0.50); /* ───────────────────────────────────── RENK — Brass / Wheat (3. aksan) Token adı --br-olive-* korundu. Değer: sıcak brass — info strip border, decorative. ───────────────────────────────────── */ --br-olive: #C9A35F; --br-olive-light: #DDB87A; --br-olive-dark: #9C7B42; --br-olive-soft: rgba(201, 163, 95, 0.20); /* ───────────────────────────────────── RENK — Wood / Leather (decorative warm tones) ───────────────────────────────────── */ --br-wood: #5C3A21; --br-leather: #8B5A3C; /* ───────────────────────────────────── GRADIENT — Pitch Glow (ana brand gradient) Amber → Neon — CTA, brand-mark, cart pill, FAB ───────────────────────────────────── */ --br-grad-sunset: linear-gradient(135deg, #FFB627 0%, #FF6B35 100%); --br-grad-sunset-soft: linear-gradient(135deg, rgba(255,182,39,0.12) 0%, rgba(255,107,53,0.12) 100%); --br-grad-sunset-radial: radial-gradient(ellipse at center top, rgba(255,107,53,0.25) 0%, transparent 60%); --br-grad-pitch-fade: linear-gradient(180deg, #0B4F2E 0%, #052F1D 100%); /* ───────────────────────────────────── LEGACY ACCENT (kademeli kaldırılacak) ───────────────────────────────────── */ --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 — Yardımcılar ───────────────────────────────────── */ --br-text: #1A1A1A; /* Light theme body text */ --br-text-soft: #4A4A4A; --br-text-mute: #6E6E6E; --br-text-on-primary: #052F1D; --br-text-on-cream: #1A1A1A; /* ───────────────────────────────────── TİPOGRAFİ ───────────────────────────────────── */ --br-font-display: 'Bebas Neue', 'Oswald', 'Anton', 'Impact', sans-serif; --br-font-heading: 'Oswald', 'Bebas Neue', sans-serif; --br-font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --br-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --br-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; /* ───────────────────────────────────── 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: 4px; --br-radius-md: 8px; --br-radius-lg: 12px; --br-radius-pill: 999px; /* ───────────────────────────────────── SHADOW ───────────────────────────────────── */ --br-shadow-sm: 0 1px 3px rgba(11, 79, 46, 0.12); --br-shadow-md: 0 4px 12px rgba(11, 79, 46, 0.18); --br-shadow-lg: 0 12px 28px rgba(11, 79, 46, 0.25); --br-shadow-neon: 0 0 16px rgba(255, 107, 53, 0.5); /* ============================================================ GERIYE UYUMLULUK — --gr-* alias'ları ============================================================ */ --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); }