/* ============================================================= Zoomi · Design Tokens Direct CSS port of ios/ZoomiTag/ZoomiTag/DesignTokens.swift. Two layers: 1. CORE — calm, tech-system palette ported 1:1 from the app (surface, ink, CTA, pastel tonal pairs, semantic). Source of truth for anything functional. 2. MARKETING — playful, pet-owner-warm accents for the web only. Higher saturation, used for section backgrounds, decorative shapes, illustration tints, marketing eyebrows. Never for functional UI (status, success, error, score). Theme is driven by [data-theme="dark"] on . The prefers-color-scheme media query is the fallback when no explicit attribute is set. ============================================================= */ :root { /* ---------- CORE · Surface palette (light) ---------- */ --zoomi-page: #FFFFFF; /* page background — pure white */ --zoomi-bg: #F1F1F1; /* tinted fills (inputs, chips, hovers) */ --zoomi-card: #FFFFFF; --zoomi-ink: #222222; --zoomi-body: #616161; --zoomi-hair: #D0D5DD; --zoomi-ring-track: #E4E4E4; --zoomi-chev: #9BA1A6; --zoomi-link: #0066CC; /* Primary CTA · inverts between modes (ink-fill in light) */ --zoomi-cta-bg: #222222; --zoomi-cta-text: #FFFFFF; /* ---------- CORE · Pastel tonal pairs (light) ---------- Each tone = container (tinted bg) + stroke (icon / text). */ --tone-green-container: #D9E9DD; --tone-green-stroke: #30B651; --tone-coral-container: #F1DFDD; --tone-coral-stroke: #F56551; --tone-purple-container: #E7DBEE; --tone-purple-stroke: #A63EDA; --tone-blue-container: #E0ECF9; --tone-blue-stroke: #0066CC; --tone-amber-container: #F4E6CB; --tone-amber-stroke: #C4842D; /* ---------- CORE · Semantic aliases (do not re-color) ---------- */ --zoomi-success: var(--tone-green-stroke); --zoomi-warning: var(--tone-amber-stroke); --zoomi-error: var(--tone-coral-stroke); --zoomi-info: var(--tone-blue-stroke); --zoomi-night-sleep:#4A5680; /* ---------- MARKETING · Pet-owner-warm accents ---------- Web-only. Saturated but not loud. Use for hero shapes, section backgrounds, eyebrow chips, illustration tints. Stable across light/dark (they're meant to pop). */ --accent-peach: #FFB494; /* warm coral, not error */ --accent-peach-soft: #FFE5D6; --accent-mint: #9BE0C4; /* warm green, not success */ --accent-mint-soft: #DCF4E9; --accent-buttercup: #FFD27A; /* warm amber, not warning */ --accent-buttercup-soft: #FFF1D2; --accent-blossom: #FFC2D8; /* soft pink, fully decorative */ --accent-blossom-soft: #FFE3EE; --accent-sky: #A8D5FF; /* playful blue, not info */ --accent-sky-soft: #E1F0FF; /* ---------- Radii ---------- */ --r-card: 24px; --r-bento: 16px; --r-inner: 14px; --r-icon: 8px; --r-pill: 999px; /* ---------- Spacing scale ---------- */ --s-xs: 8px; --s-sm: 12px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --s-2xl: 48px; --s-3xl: 64px; --s-4xl: 96px; --page-gutter: 24px; --container-max: 1440px; /* ---------- Breakpoints ---------- Canonical set, documented here as the single source of truth. CSS custom properties don't resolve inside @media queries, so these values must be hardcoded in each rule — but every @media in the v2 stylesheets MUST match one of these five values. --bp-xs 520px phone --bp-sm 720px phablet → tablet --bp-md 880px nav collapses, hero stacks --bp-lg 1080px shop two-column → one --bp-xl 1280px container max breathing If a non-canonical breakpoint is genuinely load-bearing for a specific layout constraint, keep it and annotate the @media with a "non-canonical: " comment. */ --bp-xs: 520px; --bp-sm: 720px; --bp-md: 880px; --bp-lg: 1080px; --bp-xl: 1280px; /* ---------- Type ---------- */ --font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-heading: "Bricolage Grotesque", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Display + heading scale · Bricolage Grotesque 500/600. Bumped from prior Manrope scale — Bricolage reads slightly tighter, and headings carry more weight in v2. */ --t-display-lg: 64px; --t-display-md: 52px; --t-display-sm: 44px; --t-headline-lg: 36px; --t-headline-md: 30px; --t-headline-sm: 26px; --t-title-lg: 17px; --t-title-md: 15px; --t-title-sm: 13px; --t-body-lg: 16px; --t-body-md: 15px; --t-body-sm: 13px; --t-eyebrow: 11px; /* Heading tracking is always -0.02em of the font size. Apply with: letter-spacing: var(--track-heading); */ --track-heading: -0.02em; --track-eyebrow: 0.5px; /* Line heights */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.5; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 380ms; color-scheme: light; } /* ============================================================= Dark mode · explicit attribute toggle ============================================================= */ [data-theme="dark"] { --zoomi-page: #0E0F11; --zoomi-bg: #1A1B1E; --zoomi-card: #1A1B1E; --zoomi-ink: #F5F5F5; --zoomi-body: #9CA0A6; --zoomi-hair: rgba(255, 255, 255, 0.08); --zoomi-ring-track: rgba(255, 255, 255, 0.10); --zoomi-chev: #6B6F76; --zoomi-link: #5AA7FF; --zoomi-cta-bg: #FFFFFF; --zoomi-cta-text: #0E0F11; --tone-green-container: rgba(48, 182, 81, 0.16); --tone-green-stroke: #7DDB95; --tone-coral-container: rgba(245, 101, 81, 0.16); --tone-coral-stroke: #FF8E73; --tone-purple-container: rgba(166, 62, 218, 0.18); --tone-purple-stroke: #C58CF0; --tone-blue-container: rgba(0, 102, 204, 0.20); --tone-blue-stroke: #6AB1F5; --tone-amber-container: rgba(232, 180, 92, 0.18); --tone-amber-stroke: #E8B45C; --zoomi-night-sleep: #8A95C1; color-scheme: dark; } /* System dark-mode auto-flip removed: the site renders in light mode regardless of OS preference. To opt into dark explicitly, set [data-theme="dark"] on the element you want themed (e.g. the site footer renders dark via that scope). */ /* ============================================================= Base — minimal, token-driven. Apply on via class "zoomi-app" so tokens-preview and home-v2 share the same base without forcing it on legacy pages. ============================================================= */ .zoomi-app { background: var(--zoomi-page); color: var(--zoomi-ink); font-family: var(--font-family); font-size: var(--t-body-lg); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; } .zoomi-app * { box-sizing: border-box; } /* ---------- Base reset (sitewide; loaded on every page) ---------- :where() keeps specificity at 0 so single-class component styles win without re-prefixing .zoomi-app everywhere. */ body.zoomi-app { margin: 0; } .zoomi-app :where(img, video, svg) { display: block; max-width: 100%; } .zoomi-app :where(a) { text-decoration: none; } .zoomi-app a:where(:not([class])) { color: inherit; } .zoomi-app :where(p) { margin: 0; line-height: var(--lh-body); color: var(--zoomi-body); } .zoomi-app :where(h1, h2, h3, h4) { margin: 0; color: var(--zoomi-ink); font-family: var(--font-heading); font-weight: 500; letter-spacing: var(--track-heading); } .zoomi-app :where(ul) { margin: 0; padding: 0; list-style: none; } /* Wrapped in :where() so this is a zero-specificity baseline. Any element with its own border-radius (pill inputs, buttons, cards) overrides the 4px without needing a per-element :focus-visible rule. */ :where(.zoomi-app :focus-visible) { outline: 2px solid var(--zoomi-link); outline-offset: 3px; border-radius: 4px; } .zoomi-app .zoomi-container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--page-gutter); padding-right: var(--page-gutter); } /* Heading utility — applies the -0.02em tracking + 600 weight rule from DesignTokens.swift. Pair with --t-* size token. */ .zoomi-app .h-display-lg, .zoomi-app .h-display-md, .zoomi-app .h-display-sm, .zoomi-app .h-headline-lg, .zoomi-app .h-headline-md, .zoomi-app .h-headline-sm { font-weight: 600; letter-spacing: var(--track-heading); line-height: var(--lh-tight); color: var(--zoomi-ink); margin: 0; } .zoomi-app .h-display-lg { font-size: var(--t-display-lg); } .zoomi-app .h-display-md { font-size: var(--t-display-md); } .zoomi-app .h-display-sm { font-size: var(--t-display-sm); } .zoomi-app .h-headline-lg { font-size: var(--t-headline-lg); } .zoomi-app .h-headline-md { font-size: var(--t-headline-md); } .zoomi-app .h-headline-sm { font-size: var(--t-headline-sm); } .zoomi-app .eyebrow { font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--zoomi-body); display: inline-block; } .zoomi-app .body-lg { font-size: var(--t-body-lg); color: var(--zoomi-body); } .zoomi-app .body-md { font-size: var(--t-body-md); color: var(--zoomi-body); } .zoomi-app .body-sm { font-size: var(--t-body-sm); color: var(--zoomi-body); } /* Respect user motion preference */ @media (prefers-reduced-motion: reduce) { .zoomi-app *, .zoomi-app *::before, .zoomi-app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }