/* ========================================================================== tokens.css Tasarım tokenları (renk, tipografi, boşluk, radius, gölge, breakpoint). Tek bir yerde tanımlı — herhangi bir marka değişikliği bu dosyadan yapılır. Per-tenant brand override: (baseof.html). ========================================================================== */ :root { /* --- Marka rengi (default: Yemeksepeti ölçümü #EA004B) --- Per-tenant override: */ --color-brand: #ea004b; --color-brand-dark: #b8003c; --color-brand-light: #ffe1ea; /* --- Market aksanı (nane yeşili ailesi) --- */ --color-accent-mint: #d6fff0; --color-accent-mint-dark: #007942; /* --- İndirim / kampanya rozeti --- */ --color-badge-bg: #94ffce; --color-badge-text: #007942; /* --- Nötr renkler --- */ --color-text: #333333; --color-text-secondary: #707070; --color-text-disabled: #cacaca; --color-border: #e5e5e5; --color-bg: #ffffff; --color-bg-subtle: #f7f7f8; --color-surface: #ffffff; /* --- Tipografi (Open Sans — Yemeksepeti incelemesinde ölçülen) --- */ --font-family: "Open Sans", Arial, Helvetica, sans-serif; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 24px; --fs-xxl: 32px; /* --- Radius --- pill tam yuvarlak, kart orta, buton hafif, görsel köşeli. */ --radius-pill: 9999px; --radius-card: 16px; --radius-image: 12px; --radius-button: 6px; --radius-input: 8px; /* --- Boşluk ölçeği (4-tabanlı) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* Fluid spacing — viewport ile ölçeklenen boşluklar. min(tablet, viewport * oran) — küçük ekranda min, büyük ekranda büyür. */ --space-fluid-sm: clamp(8px, 1.2vw, 14px); --space-fluid-md: clamp(12px, 1.8vw, 22px); --space-fluid-lg: clamp(16px, 2.4vw, 32px); --space-fluid-xl: clamp(20px, 3.2vw, 48px); /* --- Gölgeler --- */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-panel: 0 2px 12px rgba(0, 0, 0, 0.08); --shadow-header: 0 1px 0 rgba(0, 0, 0, 0.06); /* --- Layout boyutları --- */ --header-height: 64px; --sidebar-width: 280px; --cart-panel-width: 320px; --container-max: 1320px; /* --- Breakpoint'ler (mobile-first responsive) --- Mobile tek breakpoint: 768px. Cart panel 960px'te fixed'e geçer. */ --bp-mobile: 768px; --bp-tablet: 960px; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --color-text: #eaeaea; --color-text-secondary: #a6a6a6; --color-bg: #161616; --color-bg-subtle: #1f1f1f; --color-border: #2c2c2c; } }