/* ============================================================================ ShopperAI design tokens — assets/css/shopperai-tokens.css Brand colours are exact values from the ShopperAI brand guidelines (NotFromHere, 04/2025). Light theme is the default (Lahav's convention). Dark theme = [data-theme="dark"] on . Load first, before shopperai-glass.css and shopperai-components.css. ============================================================================ */ /* ── Brand constants (never change per theme) ─────────────────────────────── */ :root { --sa-red: #E30D00; /* brand red — palette page */ --sa-red-hover: #CD0000; --sa-red-press: #B30A00; /* = live site --pb-red-deep */ --sa-black: #241F21; /* brand black — warm near-black */ --sa-blue: #004AFF; /* brand blue — technology accent */ --sa-blue-hover: #0031E9; --sa-white: #FFFFFF; --sa-grey: #F5F5F7; /* the guide's light panel grey */ /* Neutral ramp — same hue as brand black, chroma tapered (OKLCH) */ --sa-n-950: #0B0809; --sa-n-925: #141011; --sa-n-875: #1C1718; --sa-n-900: #241F21; --sa-n-800: #383436; --sa-n-700: #534E50; --sa-n-600: #736D6F; --sa-n-500: #8F8B8C; --sa-n-400: #AEA9AB; --sa-n-300: #CDC9CB; --sa-n-200: #E0DDDE; --sa-n-100: #EEECED; --sa-n-50: #F5F5F7; /* Typography */ --sa-font-display: "acumin-pro-condensed", "Fira Sans Condensed", "Barlow Condensed", "Arial Narrow", sans-serif; --sa-font-ui: "Fira Sans", "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --sa-font-hebrew: "Heebo", "Fira Sans", -apple-system, "Segoe UI", Arial, sans-serif; --sa-font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale (px) */ --sa-fs-display: 48px; --sa-fs-h1: 32px; --sa-fs-h2: 24px; --sa-fs-h3: 18px; --sa-fs-body: 14px; --sa-fs-small: 12.5px; --sa-fs-caption: 11.5px; --sa-fs-kpi: 34px; /* Radii — 6 inputs/badges · 10 flat cards · 16 glass cards · 22 mobile cards · pill */ --sa-r-sm: 6px; --sa-r-md: 10px; --sa-r-lg: 16px; --sa-r-xl: 22px; --sa-r-pill: 999px; /* Spacing (4px grid) */ --sa-s-1: 4px; --sa-s-2: 8px; --sa-s-3: 12px; --sa-s-4: 16px; --sa-s-5: 20px; --sa-s-6: 24px; --sa-s-8: 32px; --sa-s-12: 48px; /* Layout (Lahav's app shell) */ --sa-sidebar-w: 240px; --sa-sidebar-w-collapsed: 64px; --sa-topbar-h: 60px; --sa-content-pad: 24px; --sa-content-max: 1320px; --sa-prose-max: 1080px; --sa-tap-min: 44px; /* Motion */ --sa-t-fast: 150ms ease; --sa-t-base: 200ms ease; --sa-t-enter: 350ms cubic-bezier(.2,.9,.3,1.1); --sa-ease-out: cubic-bezier(.2,.9,.3,1); /* Z-index ladder */ --sa-z-bg: 0; --sa-z-app: 1; --sa-z-sticky: 50; --sa-z-sidebar: 100; --sa-z-popover: 300; --sa-z-modal: 400; --sa-z-toast: 500; /* Logo aspect ratios (W/H) — hard-code these, never free-resize a logo */ --sa-logo-wordmark-ratio: 4.0791; /* 2500 / 612.88 */ --sa-logo-lockup-ratio: 2.5413; /* 3341.68 / 1314.94 */ --sa-logo-mark-h-ratio: 2.2497; /* 612.88 / 272.42 */ --sa-logo-mark-v-ratio: 0.4445; /* 272.42 / 612.88 */ } /* ── Light theme (default) ───────────────────────────────────────────────── */ :root, [data-theme="light"] { color-scheme: light; --sa-bg: var(--sa-grey); --sa-surface-1: #FFFFFF; --sa-surface-2: var(--sa-n-50); --sa-surface-3: var(--sa-n-200); --sa-border: rgba(36,31,33,.08); --sa-border-strong: rgba(36,31,33,.16); --sa-text: var(--sa-black); --sa-text-muted: var(--sa-n-700); /* 8.2:1 on white */ --sa-text-faint: var(--sa-n-600); /* 5.1:1 on white, 4.7:1 on grey */ --sa-text-disabled: var(--sa-n-500); /* not for readable text */ --sa-text-on-red: #FFFFFF; --sa-text-on-black: var(--sa-grey); --sa-accent: var(--sa-red); /* UI accent = brand red */ --sa-accent-hover: var(--sa-red-hover); --sa-accent-press: var(--sa-red-press); --sa-accent-soft: rgba(227,13,0,.10); --sa-accent-ring: rgba(227,13,0,.28); --sa-red-text: var(--sa-red); /* red as text/icon colour on this theme */ --sa-blue-text: var(--sa-blue); --sa-blue-soft: rgba(0,74,255,.10); --sa-link: var(--sa-blue); /* Functional / status — not brand colours, keep them quiet */ --sa-ok: #15803D; --sa-ok-soft: rgba(21,128,61,.12); --sa-warn: #B45309; --sa-warn-soft: rgba(180,83,9,.12); --sa-bad: var(--sa-red); --sa-bad-soft: rgba(227,13,0,.10); --sa-info: var(--sa-blue); --sa-info-soft: rgba(0,74,255,.10); --sa-na: var(--sa-n-600); --sa-na-soft: rgba(115,109,111,.14); /* Charts (in order of use) */ --sa-chart-1: var(--sa-red); --sa-chart-2: var(--sa-blue); --sa-chart-3: var(--sa-n-700); --sa-chart-4: #F26F77; --sa-chart-5: #6FA6FF; --sa-chart-6: var(--sa-n-400); --sa-grid: rgba(36,31,33,.07); /* Shadows */ --sa-shadow-sm: 0 4px 14px rgba(36,31,33,.08); --sa-shadow: 0 14px 38px rgba(36,31,33,.13); --sa-shadow-lg: 0 18px 44px rgba(36,31,33,.18); --sa-shadow-red: 0 8px 20px rgba(227,13,0,.30); /* Liquid glass */ --sa-glass: rgba(255,255,255,.55); --sa-glass-strong: rgba(255,255,255,.74); --sa-glass-border: rgba(255,255,255,.90); --sa-glass-hi: rgba(255,255,255,1); --sa-glass-ring: rgba(36,31,33,.08); --sa-glass-sheen: rgba(255,255,255,.60); --sa-glass-blur: 18px; --sa-bar-bg: rgba(255,255,255,.82); --sa-banner-bg: rgba(255,255,255,.94); --sa-row-hover: rgba(255,255,255,.55); --sa-hover-strong: #FFFFFF; /* Ambient glows behind the glass — brand red + brand blue only */ --sa-glow-1: rgba(227,13,0,.14); --sa-glow-2: rgba(0,74,255,.12); --sa-glow-3: rgba(0,74,255,.08); /* Faded brand pattern */ --sa-bgp-color: var(--sa-red); --sa-bgp-opacity: .05; --sa-toast-bg: var(--sa-black); --sa-toast-ink: var(--sa-grey); --sa-tooltip-bg: var(--sa-n-800); --sa-tooltip-ink: var(--sa-grey); --sa-avatar-red: linear-gradient(150deg,#FF4D3F,#CD0000); --sa-avatar-blue: linear-gradient(150deg,#4D8DFF,#0031E9); --sa-avatar-black: linear-gradient(150deg,#534E50,#241F21); --sa-selection: rgba(227,13,0,.18); } /* ── Dark theme ──────────────────────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --sa-bg: var(--sa-n-950); /* #0B0809 — live site --pb-bg */ --sa-surface-1: var(--sa-n-875); /* #1C1718 — live site --pb-surface */ --sa-surface-2: var(--sa-n-900); /* #241F21 — brand black / --pb-graphite */ --sa-surface-3: var(--sa-n-800); --sa-border: rgba(255,255,255,.10); /* live site hairline .07 — .10 for glass legibility */ --sa-border-strong: rgba(255,255,255,.16); --sa-text: var(--sa-grey); --sa-text-muted: var(--sa-n-400); /* 7.0:1 on n-900 */ --sa-text-faint: var(--sa-n-500); /* 4.8:1 on n-900 */ --sa-text-disabled: var(--sa-n-600); --sa-text-on-red: #FFFFFF; --sa-text-on-black: var(--sa-grey); --sa-accent: var(--sa-red); /* filled surfaces keep the exact brand red */ --sa-accent-hover: var(--sa-red-hover); /* white text must stay >= 4.5:1 — a lighter red fails (#F02A1C = 4.16:1); hover feedback on dark comes from --sa-shadow-red */ --sa-accent-press: var(--sa-red-hover); --sa-accent-soft: rgba(227,13,0,.16); --sa-accent-ring: rgba(255,90,77,.35); --sa-red-text: #FF5A4D; /* 5.3:1 on n-900 — red text/icons on dark */ --sa-blue-text: #4D8DFF; /* 5.1:1 */ --sa-blue-soft: rgba(77,141,255,.16); --sa-link: #4D8DFF; --sa-ok: #00C26E; --sa-ok-soft: rgba(0,194,110,.15); /* = live site --pb-green */ --sa-warn: #FBBF24; --sa-warn-soft: rgba(251,191,36,.15); --sa-bad: #FF5A4D; --sa-bad-soft: rgba(255,90,77,.16); --sa-info: #4D8DFF; --sa-info-soft: rgba(77,141,255,.16); --sa-na: var(--sa-n-400); --sa-na-soft: rgba(174,169,171,.14); --sa-chart-1: #FF5A4D; --sa-chart-2: #4D8DFF; --sa-chart-3: var(--sa-n-300); --sa-chart-4: #F26F77; --sa-chart-5: #9BC0FF; --sa-chart-6: var(--sa-n-600); --sa-grid: rgba(245,245,247,.09); --sa-shadow-sm: 0 4px 14px rgba(0,0,0,.30); --sa-shadow: 0 10px 34px rgba(0,0,0,.38); --sa-shadow-lg: 0 18px 46px rgba(0,0,0,.42); --sa-shadow-red: 0 8px 22px rgba(227,13,0,.38); --sa-glass: rgba(255,255,255,.055); --sa-glass-strong: rgba(255,255,255,.10); --sa-glass-border: rgba(255,255,255,.14); --sa-glass-hi: rgba(255,255,255,.22); --sa-glass-ring: rgba(255,255,255,.06); --sa-glass-sheen: rgba(255,255,255,.08); --sa-bar-bg: rgba(11,8,9,.72); --sa-banner-bg: rgba(36,31,33,.88); --sa-row-hover: rgba(255,255,255,.05); --sa-hover-strong: rgba(255,255,255,.16); --sa-glow-1: rgba(227,13,0,.22); --sa-glow-2: rgba(0,74,255,.20); --sa-glow-3: rgba(0,74,255,.12); --sa-bgp-color: #FF5A4D; --sa-bgp-opacity: .07; --sa-toast-bg: var(--sa-grey); --sa-toast-ink: var(--sa-black); --sa-tooltip-bg: var(--sa-n-800); --sa-tooltip-ink: var(--sa-grey); --sa-selection: rgba(255,90,77,.28); } /* ── Legacy aliases — lets the existing dashboard / demo CSS adopt the brand by swapping token files. Remove once the old variable names are gone. ──── */ :root, [data-theme="light"], [data-theme="dark"] { --bg: var(--sa-bg); --surface-1: var(--sa-surface-1); --surface-2: var(--sa-surface-2); --surface-3: var(--sa-surface-3); --border: var(--sa-border); --border-subtle: var(--sa-border); --accent: var(--sa-accent); --accent-dim: var(--sa-accent-soft); --accent-hover: var(--sa-accent-hover); --text: var(--sa-text); --text-muted: var(--sa-text-muted); --text-dim: var(--sa-text-faint); --green: var(--sa-ok); --green-dim: var(--sa-ok-soft); --red: var(--sa-bad); --red-dim: var(--sa-bad-soft); --amber: var(--sa-warn); --amber-dim: var(--sa-warn-soft); --blue: var(--sa-info); --blue-dim: var(--sa-info-soft); --purple: var(--sa-chart-3); --purple-dim: var(--sa-na-soft); --radius: var(--sa-r-md); --radius-sm: var(--sa-r-sm); --transition: var(--sa-t-fast); --sidebar-width: var(--sa-sidebar-w); --topbar-height: var(--sa-topbar-h); --bgp-color: var(--sa-bgp-color); --bgp-opacity: var(--sa-bgp-opacity); --glass-bg: var(--sa-glass); --glass-bg-strong: var(--sa-glass-strong); --glass-border: var(--sa-glass-border); --glass-hi: var(--sa-glass-hi); --glass-ring: var(--sa-glass-ring); --glass-blur: var(--sa-glass-blur); --glass-radius: var(--sa-r-lg); --glass-shadow: var(--sa-shadow); --glass-sheen: var(--sa-glass-sheen); --ink: var(--sa-text); --muted: var(--sa-text-muted); --faint: var(--sa-text-faint); --red-soft: var(--sa-accent-soft); --red-dark: var(--sa-accent-hover); --line: var(--sa-border); --glass: var(--sa-glass); --glass-strong: var(--sa-glass-strong); --shadow: var(--sa-shadow); --r-lg: var(--sa-r-xl); --r-md: var(--sa-r-lg); --r-sm: var(--sa-r-md); } /* ── Base ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--sa-bg); color: var(--sa-text); font-family: var(--sa-font-ui); font-size: var(--sa-fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } :lang(he), [lang="he"], [dir="rtl"] body { font-family: var(--sa-font-hebrew); } ::selection { background: var(--sa-selection); } h1, h2, h3, .sa-display { font-family: var(--sa-font-display); font-weight: 700; letter-spacing: -0.01em; margin: 0; } h1 { font-size: var(--sa-fs-h1); line-height: 1.05; } h2 { font-size: var(--sa-fs-h2); line-height: 1.15; } h3 { font-size: var(--sa-fs-h3); line-height: 1.25; } .sa-display { font-size: var(--sa-fs-display); line-height: 1; text-transform: uppercase; } :lang(he) h1, :lang(he) h2, :lang(he) h3, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: var(--sa-font-hebrew); font-weight: 800; letter-spacing: 0; } a { color: var(--sa-link); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--sa-accent); outline-offset: 2px; border-radius: var(--sa-r-sm); } .sa-num, .sa-ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--sa-surface-3); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--sa-text-faint); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }