/* ============================================================ * Binderim Design System — catalog-tokens.css * * Katalog ekran ailesi (ct-) icin tasarim token'lari. * Kaynak: Claude Design handoff "Binderim Design System (5)" / * colors_and_type.css — repodaki gercek sistemin (site.css MD3 + * mobil theme/index.ts) turevidir. * * Light varsayilan. / uzerindeki `theme-dark` sinifi * (uretim web pattern'i ile ayni) her token'i otomatik cevirir. * * NOT: Bu dosyadaki tum --token isimleri site.css ile CAKISMAZ; * yalnizca .ct-* / .ds-* kurallari tarafindan tuketilir, dolayisiyla * site genelindeki diger sayfalari etkilemez. * ============================================================ */ /* ---------- 1. Webfonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ---------- 2. Brand & raw palette ---------- */ :root { --brand-navy: #0f1d3a; --brand-gold: #d4a64a; --brand-gold-soft: #f1d28a; --indigo-50: #eef2ff; --indigo-100: #e0e7ff; --indigo-200: #c7d2fe; --indigo-300: #a5b4fc; --indigo-400: #818cf8; --indigo-500: #6366f1; --indigo-600: #4f46e5; --indigo-700: #4338ca; --indigo-800: #3730a3; --indigo-900: #312e81; --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-300: #93c5fd; --blue-400: #60a5fa; --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e3a8a; --blue-900: #172554; --violet-500: #8b5cf6; --violet-600: #7c3aed; --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --success-500: #16a34a; --success-600: #15803d; --success-emerald: #047857; --success-mint: #0f766e; --danger-500: #dc3545; --danger-600: #b91c1c; --warning-400: #fbbf24; --warning-500: #f59e0b; --warning-amber: #fde68a; --tcg-pokemon: #ef4444; --tcg-onepiece: #f97316; --tcg-lol: #5865f2; --tcg-panini: #0ea5e9; } /* ---------- 3. Semantic LIGHT tokens ---------- */ :root, .theme-light { --fg-1: var(--slate-900); --fg-2: var(--slate-700); --fg-3: var(--slate-500); --fg-4: var(--slate-400); --fg-on-brand: #ffffff; --bg-app: var(--slate-50); --bg-canvas: #ffffff; --bg-elevated: #ffffff; --bg-sunken: var(--slate-100); --bg-tint: var(--indigo-50); --bg-overlay: rgba(15, 23, 42, 0.4); --bg-glass: rgba(255, 255, 255, 0.85); --color-brand: var(--indigo-600); --color-brand-hover: var(--indigo-700); --color-brand-active: var(--indigo-800); --color-brand-soft: var(--indigo-50); --color-brand-fg: var(--indigo-700); --color-accent: var(--blue-600); --color-accent-hover: var(--blue-700); --color-accent-soft: var(--blue-100); --color-success: var(--success-500); --color-success-soft:#dcfce7; --color-danger: var(--danger-500); --color-danger-soft: #fee2e2; --color-warning: var(--warning-500); --color-warning-soft:#fef3c7; --color-info: var(--blue-500); --color-price-up: var(--success-emerald); --color-price-down: var(--danger-600); --color-money: var(--success-mint); --border-1: var(--slate-200); --border-2: var(--slate-300); --border-strong: var(--slate-400); --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 2px 12px rgba(15, 23, 42, 0.06); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10); --shadow-xl: 0 25px 70px rgba(15, 23, 42, 0.12); --shadow-brand: 0 8px 24px rgba(99, 102, 241, 0.20); --focus-ring: 0 0 0 0.25rem rgba(99, 102, 241, 0.25); --grad-hero: linear-gradient(160deg, #f8fafc 0%, #eef2ff 40%, #e0e7ff 100%); --grad-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --grad-feature: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --grad-cta: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); --grad-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); --grad-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); --grad-warning: linear-gradient(135deg, #f97316 0%, #ea580c 100%); } /* ---------- 4. Semantic DARK tokens ---------- */ .theme-dark { --fg-1: #f1f5f9; --fg-2: #e2e8f0; --fg-3: var(--slate-400); --fg-4: var(--slate-500); --fg-on-brand: var(--slate-900); --bg-app: var(--slate-900); --bg-canvas: var(--slate-800); --bg-elevated: var(--slate-800); --bg-sunken: var(--slate-900); --bg-tint: rgba(129, 140, 248, 0.10); --bg-overlay: rgba(0, 0, 0, 0.6); --bg-glass: rgba(30, 41, 59, 0.85); --color-brand: var(--indigo-400); --color-brand-hover: var(--indigo-300); --color-brand-active: var(--indigo-200); --color-brand-soft: rgba(99, 102, 241, 0.18); --color-brand-fg: var(--indigo-200); --color-accent: #60a5fa; --color-accent-hover: var(--blue-300); --color-accent-soft: rgba(59, 130, 246, 0.20); --color-success-soft:rgba(34, 197, 94, 0.18); --color-danger: #fca5a5; --color-danger-soft: rgba(220, 38, 38, 0.20); --color-price-up: #34d399; --color-price-down: #f87171; --color-money: #5eead4; --border-1: var(--slate-700); --border-2: var(--slate-600); --border-strong: var(--slate-500); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-xl: 0 25px 70px rgba(0, 0, 0, 0.50); --shadow-brand: 0 8px 24px rgba(129, 140, 248, 0.25); --focus-ring: 0 0 0 0.25rem rgba(129, 140, 248, 0.35); --grad-hero: linear-gradient(160deg, #0f172a 0%, #131b2e 40%, #1a1f3a 100%); --grad-brand: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); --grad-cta: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%); } /* ---------- 5. Typography — base ---------- */ :root { --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.05rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem; --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.5; --lh-relaxed:1.6; --lh-loose: 1.7; --tracking-tight: -0.5px; --tracking-normal: 0; --tracking-wide: 0.5px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 16px; --radius-3xl: 20px; --radius-pill: 999px; --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --motion-fast: 150ms; --motion-base: 250ms; --motion-slow: 350ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.0, 0, 0.2, 1); }