/* ============================================================================ sbs-tokens.css — the SBS web design-token foundation ---------------------------------------------------------------------------- Single source of truth for the rebuilt /shop-next + /checkout-next pages. Mirrors ios/SBS/Core/Theme/Theme.swift 1:1 — change a value in Theme.swift and change it here so web + iOS stay aligned. Scope: this file only DEFINES --sbs-* custom properties (+ a reduced-motion gate). It paints nothing on its own, so importing it can never disturb the other ~40 pages — only pages that opt in by USING the vars are affected. Theme model: DARK-FIRST (brand is loud/dark — "King of Pre-Owned Fashion"). Default = dark. A real light mode ships behind [data-theme="light"] on but is NOT auto-applied from prefers-color-scheme (keeps the brand on-brand). ========================================================================== */ :root, [data-theme="dark"] { /* ---- BRAND ACCENTS (Theme.Color.gold / goldBright / goldOrange) -------- */ --sbs-gold: #d4af37; /* primary accent — fills, borders */ --sbs-gold-bright: #FFD700; /* CTA / hero / theme color */ --sbs-gold-orange: #FFA500; /* gradient end */ --sbs-gold-gradient: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); /* goldGradient: topLeading→bottomTrailing */ /* ---- STRUCTURAL SURFACES (Theme.Color.bgBlack/bgCard/bgHover) ---------- */ --sbs-bg-black: #000000; /* page base */ --sbs-bg-card: #0a0a0a; /* card surface */ --sbs-bg-hover: #1a1a1a; /* hover / image placeholder tint */ /* ---- TEXT (Theme.Color.text*) ----------------------------------------- */ --sbs-text-primary: #ffffff; --sbs-text-secondary: #cccccc; --sbs-text-muted: rgba(255, 255, 255, 0.60); --sbs-gold-text: #d4af37; /* goldText — WCAG-safe gold for prices/values */ /* ---- SPEND-TIER MEDALLIONS (Theme.Color.bronze/silver; gold = --sbs-gold) */ --sbs-bronze: #CF8B4A; --sbs-silver: #C2C9D4; /* ---- SEMANTIC (Theme.Color.success/warning/danger/info/ctaSell) -------- */ --sbs-success: #d4af37; /* GOLD — there is intentionally no green */ --sbs-warning: #ff9800; --sbs-danger: #f44336; /* SOLD / errors */ --sbs-info: #2196f3; --sbs-cta-sell: #E53935; --sbs-status-pending: #F5A623; /* Theme.Color.statusPending */ --sbs-status-complete: #34C759; /* Theme.Color.statusComplete */ --sbs-status-neutral: rgba(255, 255, 255, 0.60); /* ---- BORDERS (Theme.Color.borderSubtle) ------------------------------- */ --sbs-border-subtle: rgba(212, 175, 55, 0.15); /* ---- FILTER CHIPS (Theme.Color.chip*) --------------------------------- */ --sbs-chip-active-bg: #d4af37; --sbs-chip-active-fg: #000000; --sbs-chip-idle-bg: #1a1a1a; --sbs-chip-idle-fg: #cccccc; --sbs-chip-idle-line: rgba(212, 175, 55, 0.15); /* ---- SHADOWS (Theme.Shadow.soft/strong/gold) -------------------------- */ --sbs-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.25); --sbs-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.55); --sbs-shadow-gold: 0 8px 22px rgba(255, 215, 0, 0.35); /* ---- OVERLAYS --------------------------------------------------------- */ --sbs-scrim: rgba(0, 0, 0, 0.55); /* sold-out / flex image scrim */ } [data-theme="light"] { /* Warm ivory + cool blue-grey, complementary to gold (mirrors Theme light side). */ --sbs-bg-black: #F6F4EF; --sbs-bg-card: #FFFFFF; --sbs-bg-hover: #E9EDF2; --sbs-text-primary: #111827; --sbs-text-secondary: #374151; --sbs-text-muted: rgba(17, 24, 39, 0.52); --sbs-gold-text: #8A6D1A; /* deep bronze — ~4.9:1 on white (WCAG AA) */ --sbs-bronze: #A8682E; --sbs-silver: #7C8794; --sbs-border-subtle: rgba(203, 213, 225, 0.80); --sbs-chip-active-bg: #111827; --sbs-chip-active-fg: #FFFFFF; --sbs-chip-idle-bg: #E8EDF3; --sbs-chip-idle-fg: #374151; --sbs-chip-idle-line: #CBD5E1; --sbs-shadow-soft: 0 4px 12px rgba(31, 41, 55, 0.08); --sbs-shadow-strong: 0 12px 32px rgba(31, 41, 55, 0.16); /* gold glow shadow + scrim stay identical across themes */ } :root { /* ====================================================================== TYPOGRAPHY (Theme.Font; web = Inter body + Gagalin display) ---------------------------------------------------------------------- iOS Dynamic Type keeps the exact point size at the default text setting and scales (capped) for larger settings. The faithful web analog is REM: 1rem = the user's root font-size (16px default), so every label honours the reader's browser/OS font preference — true Dynamic Type, not just a viewport hack. Display sizes additionally use clamp() for fluid scaling. Base sizes below equal the iOS point sizes at the 16px default. ====================================================================== */ /* iOS uses SF Pro throughout the product UI. `-apple-system` resolves to the same family in Safari / installed web apps, while the remaining stack keeps the hierarchy intact everywhere else. The crown remains an image — it is the only intentionally graffiti-styled brand mark. */ --sbs-font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; --sbs-font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; --sbs-font-price: ui-rounded, -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'Segoe UI', system-ui, sans-serif; --sbs-fs-micro: 0.6875rem; /* 11px — card field label/value (iOS 11pt) */ --sbs-fs-caption: 0.8125rem; /* 13px — Font.caption() default */ --sbs-fs-body: 1rem; /* 16px — Font.body() default + a11y floor */ --sbs-fs-price: 1.125rem; /* 18px — Font.price() default (rounded) */ --sbs-fs-title: 1rem; /* 16px — Font.title(16) small-title token */ --sbs-fs-title-lg: 1.375rem; /* 22px — section titles */ --sbs-fs-title-xl: 1.75rem; /* 28px — Font.title() default */ --sbs-fs-display: clamp(1.75rem, 1.30rem + 2.2vw, 2.25rem); /* 28→36 hero, Font.display */ /* Weights (Font tokens: display .black / title .bold / body .regular / price .semibold / caption .medium) */ --sbs-fw-regular: 400; --sbs-fw-medium: 500; --sbs-fw-semibold: 600; --sbs-fw-bold: 700; --sbs-fw-heavy: 800; --sbs-fw-black: 900; /* Letter-spacing tracks */ --sbs-track-brand: 0.6px; /* card brand heading */ --sbs-track-stamp: 3px; /* SOLD / RESERVED overlay stamp */ --sbs-track-pill: 0.3px; /* filter pills */ /* ====================================================================== SPACING (Theme.Spacing — 8pt grid) ====================================================================== */ --sbs-xs: 4px; --sbs-sm: 8px; --sbs-md: 16px; --sbs-lg: 24px; --sbs-xl: 32px; --sbs-2xl: 48px; /* ====================================================================== RADII (Theme.Radius — continuous-style corners) ====================================================================== */ --sbs-r-sm: 8px; --sbs-r-md: 12px; --sbs-r-card: 16px; --sbs-r-pill: 999px; /* ====================================================================== CONTROL METRICS (shared iOS component contracts) ---------------------------------------------------------------------- The app gives every touch action a 44pt hit area. Category/filter pills have 16pt horizontal and 8pt vertical content insets; compact metadata chips use the Chip.swift 8/4 inset pair and an 8pt corner radius. ====================================================================== */ --sbs-control-hit: 44px; --sbs-control-compact: 36px; --sbs-pill-pad-x: 16px; --sbs-pill-pad-y: 8px; --sbs-chip-pad-x: 8px; --sbs-chip-pad-y: 4px; --sbs-icon-size: 18px; --sbs-icon-size-small: 14px; --sbs-icon-stroke: 2.25; --sbs-action-label-size: 9px; /* ====================================================================== MOTION (Theme spring(response, dampingFraction) → CSS duration + easing) ---------------------------------------------------------------------- Lower damping → more overshoot bezier. response → duration. ====================================================================== */ --sbs-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* standard ease-out */ --sbs-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot — heart, pills */ --sbs-ease-snappy: cubic-bezier(0.40, 0.00, 0.20, 1); /* .snappy — numeric counters */ --sbs-dur-fast: 180ms; /* spring response ~0.25 (heart) */ --sbs-dur-base: 280ms; /* spring response ~0.28 (pills, clear) */ --sbs-dur-slow: 380ms; /* skeleton → content crossfade */ --sbs-press-scale: 0.96; /* tactile iOS-style press response */ /* ====================================================================== GRID / CARD METRICS ====================================================================== */ --sbs-grid-gutter: 16px; /* Spacing.md */ --sbs-card-img-ratio: 9 / 16; /* uniform portrait product image */ /* ====================================================================== GLASS (reuse app-shell.css tokens when present; safe fallbacks here) ====================================================================== */ --sbs-glass-bg: rgba(18, 18, 20, 0.55); --sbs-glass-bg-strong: rgba(10, 10, 12, 0.72); --sbs-glass-blur: 22px; --sbs-glass-saturate: 180%; --sbs-hairline: rgba(255, 255, 255, 0.10); --sbs-hairline-gold: rgba(212, 175, 55, 0.22); } /* One predictable inline geometry for the local SBS symbol sprite. Individual components own their size; this only prevents SVG baseline drift. */ .sbs-symbol { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.125em; fill: currentColor; stroke: currentColor; } /* ============================================================================ MOTION GATE — single place that honours system Reduce Motion OR a user toggle (.no-motion on ). Mirrors the iOS "one motion gate" rule and the project rule: never ship flicker/pop/jank. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .no-motion *, .no-motion *::before, .no-motion *::after { animation: none !important; transition: none !important; }