/* ============================================================ tokens.css — Merkezi Tasarım Token'ları ──────────────────────────────────────────────────────────── Tema: toonpop_pwa (DEMO RESTAURANT — Toon Pop) Palet: Toon Pop / Comic Book Sarı zemin + scarlet kırmızı + siyah outline Halftone dotlar + offset shadow (signature) YAPILANDIRMA: - Tüm CSS değişkenleri (renk, tipografi, boşluk, köşe) burada. - Birincil prefix: --br-* (yz_paketservis ile uyumlu — sayfa CSS'leri agnostic kalır) - Toon Pop signature: --br-shadow-* (offset comic shadow) - Halftone: --br-halftone-* (dotlu zemin desenleri) - Bu dosya header.php'de EN BAŞTA yüklenir. FELSEFE: Mevcut sayfa CSS'leri var(--br-bg-1), var(--br-gold), var(--br-cream) referansı kullanıyor. Buradaki değişken adları KORUNUYOR ki sayfalar bozulmadan Toon Pop görünüm kazansın. - --br-bg-1 → Toon Pop'ta SARI (eskiden koyu wine) - --br-gold → Toon Pop'ta KIRMIZI (eskiden terracotta) - --br-wine → Toon Pop'ta SİYAH outline (eskiden wine) - --br-cream → Toon Pop'ta KREM beyaz/sarı tonu (aynı kalır) ============================================================ */ :root { /* ───────────────────────────────────── RENK — Zemin (Toon Pop sarı + cream) ───────────────────────────────────── */ --br-bg-1: #FFD93D; /* ★ Ana zemin — Toon sarı (signature) */ --br-bg-2: #FFE873; /* Açık sarı (header, banner) */ --br-bg-3: #FFFFFF; /* Beyaz (cards) */ --br-bg-4: #FFFAEB; /* Krem beyaz (alt zeminler, soft) */ --br-bg-elev: rgba(26, 26, 26, 0.04); /* Sarı tonları (yardımcı) */ --br-yellow: #FFD93D; --br-yellow-light: #FFE873; --br-yellow-dark: #E6BF1A; --br-yellow-deep: #B89200; /* ───────────────────────────────────── RENK — Krem & Beyaz katmanları ───────────────────────────────────── */ --br-cream: #FFFAEB; --br-cream-soft: rgba(255, 250, 235, 0.85); --br-cream-muted: rgba(255, 250, 235, 0.65); --br-cream-dim: rgba(255, 250, 235, 0.45); --br-cream-faint: rgba(255, 250, 235, 0.18); /* ───────────────────────────────────── RENK — Ana aksan: SCARLET KIRMIZI (Toon signature) (eskiden terracotta gold idi, şimdi Toon kırmızı) ───────────────────────────────────── */ --br-gold: #FF3E3E; /* ★ Ana aksan — Toon scarlet kırmızı */ --br-gold-light: #FF6B6B; /* Hover */ --br-gold-dark: #E62525; /* Active/pressed */ --br-gold-deep: #B81818; /* Çok koyu vurgu */ --br-gold-soft: rgba(255, 62, 62, 0.10); --br-gold-line: rgba(255, 62, 62, 0.25); --br-gold-glow: rgba(255, 62, 62, 0.45); /* Aliaslar — semantik isim */ --br-red: var(--br-gold); --br-red-light: var(--br-gold-light); --br-red-dark: var(--br-gold-dark); /* ───────────────────────────────────── RENK — İkincil aksan: SİYAH OUTLINE (eskiden wine) Toon Pop signature: tüm outline'lar siyah ───────────────────────────────────── */ --br-wine: #1A1A1A; /* ★ Outline / metin / kalın bordür */ --br-wine-light: #44443F; /* Hover (gri-siyah) */ --br-wine-dark: #000000; /* Saf siyah */ --br-wine-soft: rgba(26, 26, 26, 0.08); --br-wine-line: rgba(26, 26, 26, 0.20); --br-wine-glow: rgba(26, 26, 26, 0.35); /* Aliaslar */ --br-black: var(--br-wine); --br-black-soft: var(--br-wine-soft); /* ───────────────────────────────────── RENK — Üçüncül: YEŞİL (FRESH / SUCCESS) ───────────────────────────────────── */ --br-olive: #3FCB6C; /* Toon FRESH yeşili */ --br-olive-light: #6FE093; --br-olive-dark: #2BA856; --br-olive-soft: rgba(63, 203, 108, 0.18); /* ───────────────────────────────────── GRADIENTLER (Toon Pop'ta düz renk) ───────────────────────────────────── */ --br-grad-sunset: var(--br-gold); --br-grad-sunset-soft: var(--br-gold-soft); --br-grad-sunset-radial: radial-gradient(ellipse at center top, rgba(255, 62, 62, 0.10) 0%, transparent 60%); /* ───────────────────────────────────── GERIYE UYUMLULUK — orange/accent alias ───────────────────────────────────── */ --br-orange: var(--br-gold); --br-orange-dark: var(--br-gold-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); /* ───────────────────────────────────── METİN — Renkli zeminlerin üzerine ───────────────────────────────────── */ --br-text-on-primary: #FFFFFF; --br-text-on-yellow: #1A1A1A; --br-text-on-black: #FFD93D; /* ───────────────────────────────────── TİPOGRAFİ (Toon Pop fontlar) ───────────────────────────────────── */ --br-font-serif: 'Sora', 'Archivo Black', 'Bebas Neue', system-ui, sans-serif; --br-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --br-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; --br-font-display: var(--br-font-serif); /* ───────────────────────────────────── BOŞLUKLAR ───────────────────────────────────── */ --br-space-xs: 4px; --br-space-sm: 8px; --br-space-md: 14px; --br-space-lg: 22px; --br-space-xl: 32px; /* ───────────────────────────────────── KÖŞE YUVARLAMALARI ───────────────────────────────────── */ --br-radius-sm: 8px; --br-radius-md: 12px; --br-radius-lg: 16px; --br-radius-pill: 999px; /* ───────────────────────────────────── ★ TOON POP SIGNATURE — Offset Shadow ───────────────────────────────────── */ --br-shadow-sm: 3px 3px 0 var(--br-wine); --br-shadow-md: 5px 5px 0 var(--br-wine); --br-shadow-lg: 8px 8px 0 var(--br-wine); --br-shadow-xl: 12px 12px 0 var(--br-wine); --br-shadow-red: 5px 5px 0 var(--br-gold); --br-shadow-yellow:5px 5px 0 var(--br-yellow); --br-shadow-hover: 4px 4px 0 var(--br-wine); /* ───────────────────────────────────── ★ TOON POP — Kalın Outline Bordürler ───────────────────────────────────── */ --br-border: 3px solid var(--br-wine); --br-border-thick: 4px solid var(--br-wine); --br-border-thin: 2px solid var(--br-wine); /* ───────────────────────────────────── ★ TOON POP — Halftone (dotlu zemin desenleri) ───────────────────────────────────── */ --br-halftone-light: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.06) 1px, transparent 0); --br-halftone-mid: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.10) 1px, transparent 0); --br-halftone-dark: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.18) 1px, transparent 0); --br-halftone-size: 12px 12px; --br-halftone-size-lg: 14px 14px; /* ============================================================ v021 — STATE COLORS (Success / Danger / Info) ============================================================ */ --br-success: var(--br-olive); --br-success-light: var(--br-olive-light); --br-success-dim: var(--br-olive-soft); --br-success-line: rgba(63, 203, 108, 0.40); --br-danger: var(--br-gold); --br-danger-light: var(--br-gold-light); --br-danger-bright: #FF6B6B; --br-danger-dim: var(--br-gold-soft); --br-danger-line: var(--br-gold-line); --br-info: var(--br-yellow-dark); --br-info-dim: rgba(230, 191, 26, 0.18); --br-info-line: rgba(230, 191, 26, 0.40); --br-white: #FFFFFF; --br-whatsapp: #25D366; --br-whatsapp-dark: #20bd5a; --br-status-pending-bg: rgba(255, 217, 61, 0.30); --br-status-pending-fg: #B89200; --br-status-progress-bg: rgba(63, 203, 108, 0.20); --br-status-progress-fg: var(--br-olive-dark); --br-status-success-bg: var(--br-success-dim); --br-status-success-fg: var(--br-olive-dark); --br-status-cancel-bg: var(--br-danger-dim); --br-status-cancel-fg: var(--br-gold-dark); /* ============================================================ GERIYE UYUMLULUK — --gr-* alias'ları ============================================================ */ --gr-primary: var(--br-gold); --gr-primary-dark: var(--br-gold-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); }