/* YallaMachines design tokens — System B (P6 brand redesign). * * Mirrors design/project/tokens.css. Single :root block; every other YM * stylesheet pulls from these vars — no per-template inline palettes. * * Brand rules (locked): * • --ink is the brand colour. Buttons, links, wordmark, body text. * • --accent (orange) is alert-only. Logo + match badges + push icon * bg + unread dot. Target ~5% of rendered pixels, never primary. * • --paper-2 is cream, sits warm with orange. Replaces cool grey. */ :root { /* Ink (brand + text + chrome) */ --ink: #0A1826; --ink-2: #2A3947; --ink-3: #4A5867; --ink-4: #6B7785; --ink-5: #9099A3; /* Paper (surfaces) */ --paper: #FFFFFF; --paper-2: #F8F4EE; /* cream — app shell, hover */ --paper-3: #EFE9DF; /* dividers, inactive chips */ /* Accent — alert orange. Logo + signal only. */ --accent: #E85D04; --accent-2: #B84804; /* pressed/hover for orange surfaces */ --accent-tint: #FFE6D4; /* badge tint on paper if needed */ /* Signal — used sparingly: pending price drop, expired listing */ --warn: #B45309; --warn-tint: #FEF3C7; /* Borders */ --border-1: rgba(10, 24, 38, 0.10); --border-2: rgba(10, 24, 38, 0.18); --border: var(--border-1); /* Shadows */ --shadow-1: 0 1px 2px rgba(10, 24, 38, 0.06); --shadow-2: 0 1px 2px rgba(10, 24, 38, 0.04), 0 4px 12px rgba(10, 24, 38, 0.06); /* Radii */ --radius-sm: 6px; --radius-md: 10px; /* inputs, btn */ --radius-lg: 14px; /* cards */ --radius-xl: 20px; --radius-pill: 999px; --radius-icon: 22.5%; /* iOS Springboard mask (225/1024) */ /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --tracking-caps: 0.10em; /* Type scale */ --fs-d1: clamp(2rem, 5vw, 2.75rem); --fs-h1: 1.5rem; --fs-h2: 1.125rem; --fs-base: 0.9375rem; /* 15 — brand-sheet body */ --fs-sm: 0.8125rem; /* 13 */ --fs-xs: 0.6875rem; /* 11 — eyebrow */ /* Spacing ladder (4-8-12-16-20-24-32-40-56-72) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; /* Tap targets (Apple HIG minimum 44px) */ --tap-min: 44px; --tap-lg: 52px; /* Containers */ --container-feed: 720px; --container-page: 1280px; /* Topbar height (used for sticky offsets) */ --topbar-h: 56px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* Dark-mode tokens — invert ink/paper, keep orange reserved. * * Cascade rules: * 1. Default :root above = light. * 2. If user OS-preference is dark AND user has not opted in to a * specific theme (no html[data-theme]), use dark. * 3. Explicit html[data-theme="dark"] always wins (used by the toggle * to override the OS preference for the current device). * 4. Explicit html[data-theme="light"] forces light, even if the OS * is dark. * * Pre-paint inline boot script in base.html sets data-theme from * localStorage('ym-theme') before first paint to avoid FOUC. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #F4EFE6; --ink-2: #D4CFC7; --ink-3: #A39E96; --ink-4: #7A746C; --ink-5: #4A4540; --paper: #0A1826; --paper-2: #122031; --paper-3: #1B2D43; --accent: #FF7A2E; --accent-2: #E85D04; --accent-tint: rgba(232, 93, 4, 0.18); --warn: #FCD34D; --warn-tint: rgba(252, 211, 77, 0.10); --border-1: rgba(244, 239, 230, 0.10); --border-2: rgba(244, 239, 230, 0.20); --border: var(--border-1); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.40), 0 8px 24px -12px rgba(0, 0, 0, 0.60); } } :root[data-theme="dark"] { --ink: #F4EFE6; --ink-2: #D4CFC7; --ink-3: #A39E96; --ink-4: #7A746C; --ink-5: #4A4540; --paper: #0A1826; --paper-2: #122031; --paper-3: #1B2D43; --accent: #FF7A2E; --accent-2: #E85D04; --accent-tint: rgba(232, 93, 4, 0.18); --warn: #FCD34D; --warn-tint: rgba(252, 211, 77, 0.10); --border-1: rgba(244, 239, 230, 0.10); --border-2: rgba(244, 239, 230, 0.20); --border: var(--border-1); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.40), 0 8px 24px -12px rgba(0, 0, 0, 0.60); } /* html[data-theme="light"] inherits :root defaults — no override needed. * The selector exists so the @media (prefers-color-scheme: dark) block * can negate it (see :not([data-theme="light"]) above). */ /* Reduced motion — kill everything except tap-feedback. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Element baselines using tokens */ * { box-sizing: border-box; } html, body { background: var(--paper-2); color: var(--ink); font-family: var(--font-sans); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } a { color: inherit; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* Tabular numerics for prices, mileages, ages */ .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Flex helpers used by designer JSX (.row / .col are pervasive in * design/project/*.jsx). Per-element style attributes still drive * gap, alignment, justify — these utilities only set display + axis. */ .row { display: flex; flex-direction: row; } .col { display: flex; flex-direction: column; } /* Eyebrow / caps */ .eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-4); font-weight: 600; }