/* ============================================================ eTech Design System — Foundation tokens v3 — Tightened, more confident palette and type rhythm ============================================================ */ :root { /* ---------- BRAND ---------- Deeper, more confident blue. The previous #3599EA read bright/consumer; this hue carries authority while still pairing with the existing orange accent. */ --brand: #1F6FEB; --brand-hover: #1858C2; --brand-active: #14479B; --brand-50: #EEF5FF; --brand-100: #DCE8FB; --brand-200: #BBD2F6; --brand-700: #0F3F87; /* ---------- ACCENT ---------- Orange — sale / discount / strikethrough. Never a CTA. */ --orange: #E5511A; --orange-soft: #FFF1EA; /* ---------- INK (neutrals, 9-step) ---------- Cool, slightly desaturated — reads more grown-up than pure greys. */ --ink-900: #0E1A2B; /* sidebar bg, hero headings */ --ink-800: #1B2230; /* body text */ --ink-700: #323845; /* prices, strong numbers */ --ink-500: #5C6473; /* secondary text */ --ink-400: #8A93A3; /* muted, captions */ --ink-300: #B5BCC8; /* placeholder */ --ink-200: #DEE3EB; /* hairline divider */ --ink-100: #ECEFF3; /* surface fill */ --ink-50: #F6F7F9; /* admin bg */ --bg-soft: #F8FAFC; /* storefront bg */ --bg: #FFFFFF; --sidebar-text: #C8D1DF; --sidebar-hover: rgba(255,255,255,0.06); /* ---------- SEMANTIC ---------- */ --success: #1E9E5C; --success-soft: #E5F5EC; --warning: #C97A0E; --warning-soft: #FCF1E0; --danger: #C42B3D; --danger-soft: #FBE9EC; --info: #0E8AA6; --info-soft: #E1F2F6; /* ---------- BORDERS ---------- */ --border: var(--ink-200); --border-strong: #D5DBE3; --border-input: #D1D7E0; --focus-ring: 0 0 0 3px rgba(31,111,235,0.22); /* ---------- RADII ---------- */ --r-xs: 3px; --r-sm: 6px; --r: 8px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; /* ---------- SHADOWS ---------- Tighter, lower-spread shadows. Less floaty, more "weight on the page". */ --shadow-xs: 0 1px 2px rgba(15,26,43,0.06), 0 1px 1px rgba(15,26,43,0.04); --shadow-sm: 0 1px 3px rgba(15,26,43,0.08), 0 2px 6px rgba(15,26,43,0.04); --shadow-md: 0 2px 6px rgba(15,26,43,0.08), 0 8px 20px rgba(15,26,43,0.06); --shadow-lg: 0 6px 16px rgba(15,26,43,0.10), 0 16px 32px rgba(15,26,43,0.08); --shadow-xl: 0 12px 32px rgba(15,26,43,0.14); /* ---------- SPACING (4-px base) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* ---------- LAYOUT ---------- */ --container-max: 1240px; --sidebar-w: 240px; --topbar-h: 56px; /* ---------- MOTION ---------- */ --t-fast: .14s cubic-bezier(0.4, 0, 0.2, 1); --t: .22s cubic-bezier(0.4, 0, 0.2, 1); --t-drawer: .32s cubic-bezier(0.4, 0, 0.2, 1); /* ---------- TYPE — FAMILIES ---------- Inter is set-and-forget for product UI: tight metrics, broad weight range, locale-friendly (full Azerbaijani diacritics). One sans across the system. */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', SFMono-Regular, Consolas, monospace; /* ---------- TYPE — SCALE (snapped to 2-px grid) ---------- */ --fs-2xs: 10px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 36px; --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.5; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- TEXT ROLES ---------- */ --fg: var(--ink-800); --fg-strong: var(--ink-900); --fg-muted: var(--ink-400); --fg-faint: var(--ink-300); --fg-link: var(--brand); } /* ============================================================ SEMANTIC TYPE PRESETS ============================================================ */ .h-page-title { font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--ink-900); line-height: var(--lh-tight); letter-spacing: -0.015em; } .h-section { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--ink-900); line-height: var(--lh-tight); letter-spacing: -0.01em; } .h-card-title { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--ink-800); line-height: var(--lh-snug); letter-spacing: -0.005em; } .h-banner { font-family: var(--font-sans); font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: #fff; line-height: var(--lh-tight); letter-spacing: -0.02em; } .t-body { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-regular); color: var(--fg); line-height: var(--lh-base); } .t-body-strong { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--fg); } .t-meta { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--ink-400); } .t-caption { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--ink-400); } .t-overline { font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--ink-400); text-transform: uppercase; letter-spacing: 0.10em; } .t-product-name { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-800); line-height: var(--lh-snug); letter-spacing: -0.005em; } /* Specials — locked 4-token set */ .t-price { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--ink-900); letter-spacing: -0.01em; font-feature-settings: 'tnum'; } .t-price-old { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--ink-400); text-decoration: line-through; font-feature-settings: 'tnum'; } .t-stat { font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--ink-900); letter-spacing: -0.02em; font-feature-settings: 'tnum'; } .t-mono { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-800); } /* ============================================================ BASE ============================================================ */ body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; } body.surface-storefront { background: var(--bg-soft); } body.surface-admin { background: var(--ink-50); }