/* * LithiumShop design tokens — the single source of truth for visual values. * Components must consume semantic tokens (--color-*, --space-*, …), never raw palette values or ad-hoc numbers. * Palette ramps exist only to define semantic tokens (and to allow a future dark theme by remapping them). */ @layer tokens, base, layout, components, utilities, page; @layer tokens { :root { color-scheme: light; /* ─── Palette (do not use directly in components) ─────────────── */ --slate-0: #ffffff; --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-700: #334155; --slate-900: #0f172a; --blue-50: #eff6ff; --blue-200: #bfdbfe; --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e40af; --green-100: #dcfce7; --green-200: #bbf7d0; --green-600: #16a34a; --green-800: #166534; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-600: #d97706; --amber-800: #92400e; --red-100: #fee2e2; --red-200: #fecaca; --red-600: #dc2626; --red-700: #b91c1c; /* ─── Semantic colors ─────────────────────────────────────────── */ /* Three levels of depth: the page sits below its content, so white cards read as raised. --color-canvas is the page itself; --color-bg is a raised surface (cards, header, inputs, modals); --color-surface / --color-surface-alt are quiet fills *inside* a raised surface. */ --color-canvas: var(--slate-100); --color-bg: var(--slate-0); --color-surface: var(--slate-50); --color-surface-alt: var(--slate-100); --color-text: var(--slate-900); /* Grey has two jobs and they are not interchangeable: --color-text-strong-muted is BODY COPY — any paragraph meant to be read, and anything sitting directly on --color-canvas (9.4:1 there). --color-text-secondary is METADATA ONLY — labels, captions, counts, icons — and only on --color-bg or --color-surface. On the canvas it is 4.34:1 and FAILS AA for normal text. */ --color-text-strong-muted: var(--slate-700); --color-text-secondary: var(--slate-500); --color-text-muted: var(--slate-400); /* decorative / disabled only — fails AA for text */ --color-border: var(--slate-200); --color-border-strong: var(--slate-300); --color-border-control: var(--slate-400); /* input outlines */ --color-primary: var(--blue-600); --color-primary-hover: var(--blue-700); --color-primary-active: var(--blue-800); --color-primary-soft: var(--blue-50); --color-on-primary: var(--slate-0); --color-success: var(--green-600); --color-success-bg: var(--green-100); --color-success-border: var(--green-200); --color-success-text: var(--green-800); --color-warning: var(--amber-600); --color-warning-bg: var(--amber-100); --color-warning-border: var(--amber-200); --color-warning-text: var(--amber-800); --color-danger: var(--red-600); --color-danger-hover: var(--red-700); --color-danger-bg: var(--red-100); --color-danger-border: var(--red-200); --color-danger-text: var(--red-700); --color-info: var(--blue-600); --color-info-bg: var(--blue-50); --color-info-border: var(--blue-200); --color-info-text: var(--blue-700); --color-focus: var(--blue-600); --color-overlay: rgb(15 23 42 / 0.45); --focus-ring-soft: 0 0 0 3px rgb(37 99 235 / 0.2); --focus-ring-danger: 0 0 0 3px rgb(220 38 38 / 0.18); /* ─── Typography ──────────────────────────────────────────────── */ --font-sans: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace; --text-12: 0.75rem; --text-13: 0.8125rem; --text-14: 0.875rem; --text-15: 0.9375rem; --text-16: 1rem; --text-18: 1.125rem; --text-20: 1.25rem; /* Each step must stay distinct at BOTH ends of the clamp. h3 used to bottom out at 20px, the same as h4, so on a phone two tiers looked identical. Phone ladder: 32 · 24 · 22 · 20 · 16 — desktop: 48 · 36 · 28 · 20 · 16. */ --text-h4: 1.25rem; /* 20 */ --text-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem); /* 22 → 28 */ --text-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); /* 24 → 36 */ --text-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem); /* 32 → 48 */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Persian script needs taller line boxes than Latin. Never add letter-spacing to Persian text. */ --leading-tight: 1.4; --leading-snug: 1.6; --leading-body: 1.85; /* ─── Spacing (4-based scale) ─────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-6); --space-xl: var(--space-8); --space-2xl: var(--space-12); --space-3xl: var(--space-16); /* ─── Radius ──────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; /* cards */ --radius-xl: 16px; /* modals, sheets */ --radius-full: 999px; /* circles only — not for buttons */ /* ─── Elevation ─────────────────────────────────────────────── Resting cards stay flat (BRIEF §7: contrast + border + spacing). These are for floating UI — dropdowns, popovers, modals, the sticky header — and for the raised state of something the pointer is on. Each step is three layers: a wide ambient shadow, a tighter directional one and a 1px contact edge. One big blurred blob reads as a sticker; the layered version is what makes a surface look lifted. */ --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05), 0 0 0 1px rgb(15 23 42 / 0.02); --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.04), 0 2px 6px -1px rgb(15 23 42 / 0.07), 0 4px 12px -4px rgb(15 23 42 / 0.05); --shadow-md: 0 1px 2px rgb(15 23 42 / 0.04), 0 4px 10px -2px rgb(15 23 42 / 0.08), 0 14px 28px -8px rgb(15 23 42 / 0.12); --shadow-lg: 0 1px 3px rgb(15 23 42 / 0.05), 0 8px 20px -6px rgb(15 23 42 / 0.12), 0 28px 56px -16px rgb(15 23 42 / 0.22); /* How far an interactive surface rises under the pointer. One value everywhere, so every card, tile and row answers a hover with exactly the same movement. */ --raise: -2px; /* ─── Controls ────────────────────────────────────────────────── */ --control-sm: 36px; /* dense/desktop-only contexts */ --control-md: 44px; /* default — minimum comfortable touch target */ --control-lg: 52px; /* ─── Layout ──────────────────────────────────────────────────── */ --container-max: 1280px; --gutter: var(--space-4); /* Breakpoints (media queries cannot read custom properties — keep in sync): sm 640px · md 768px · lg 1024px · xl 1280px */ /* ─── Z-index ─────────────────────────────────────────────────── */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ─── Motion (functional only) ────────────────────────────────── */ --duration-micro: 120ms; /* hover, press, small toggles */ --duration-normal: 200ms; /* dropdowns, toasts, tabs */ --duration-large: 300ms; /* modals, sheets, page-level */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* A small, controlled overshoot for something arriving (a chip appearing, an indicator sliding). Never for something leaving — a bounce on exit reads as a glitch. Keep it off anything larger than a card. */ --ease-spring: cubic-bezier(0.32, 1.6, 0.52, 1); /* The one transition an interactive surface uses when the pointer arrives. */ --transition-raise: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out); } @media (min-width: 768px) { :root { --gutter: var(--space-6); } } }