/* Design tokens pulled directly from the CofeeAPP client (src/theme/*.ts) — keep in sync manually if the app's palette/type scale changes. */ :root { /* palette */ --espresso: #4A3326; --coffee: #6F4E37; --caramel: #C8964F; --crema: #D4A373; --cream: #F7F3EF; --ink: #271D10; --stone: #7A6E64; --muted-text: #887A70; --mist: #E6DDD4; --success: #3F8F5B; --terracotta: #AB734C; --tan: #D7A675; --dark-container: #674B37; /* app's colors.darkContainer — NOT --coffee (#6F4E37) */ --sand: #F2DCC5; --background-light: #E4D4B7; --review-accent: #0891B2; --favorite: #1BA83C; --brand-orange: #E8742E; --unwanted: #CE5A3A; /* destructive — app's `colors.destructive` */ /* semantic */ --color-primary: var(--coffee); --color-primary-dark: var(--espresso); --color-accent: var(--caramel); --color-bg: var(--background-light); --color-surface: var(--cream); --color-text: var(--ink); --color-text-secondary: var(--stone); --color-text-muted: var(--muted-text); --color-border: var(--mist); --color-on-primary: #FFFFFF; --color-destructive: var(--unwanted); /* type (Rubik, matching the app) */ --font-body: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif; /* Web type scale — the "Web_ready" Figma frame steps the whole site down to a compact 10–18px scale (Rubik Medium). Most body copy = 10px, small headings = 12px, blob titles = 14px, the one large caps heading = 18px. */ --fs-body: 10px; --fs-sm: 12px; --fs-md: 14px; --fs-h2: 18px; /* spacing scale (src/theme/spacing.ts) */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-xxl: 32px; --space-xxxl: 48px; /* radius scale */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 28px; --radius-xxl: 32px; --radius-pill: 999px; /* The hero + phone showcase are laid out at fixed pixel sizes matching the Figma reference (a ~1440px-wide frame). Left alone, they'd stay that exact pixel size forever, so on a large/high-res display (e.g. 2560px+) they'd end up looking tiny — the same absolute size, just surrounded by much more empty background — rather than filling a similar proportion of the screen the way the 1440px reference does. .hero-scale / .showcase scale by this factor to compensate. The actual value is computed in JS and written to this property (see the inline