/* * Aperina design tokens — plain CSS custom properties. * Used by app/globals.css (Tailwind v4) and by styleguide/index.html. * * Themes: light (cream) is default. Dark (mocha) follows the OS unless * is set; forces dark. * Components use ROLE tokens only (--bg, --text, --primary …), never raw palette tokens. */ :root { /* ---------- Brand palette (Luxe: Grey · Cream · Mocha · Wine) ---------- */ --ap-mocha: #322D29; --ap-wine: #72383D; --ap-taupe: #AC9C8D; --ap-sand: #D1C7BD; --ap-grey: #D9D9D9; --ap-cream: #EFE9E1; /* ---------- Extended steps derived from the palette ---------- */ --ap-cream-raised: #F7F3EE; --ap-cream-sunken: #E6DED5; --ap-mocha-deep: #211D1A; --ap-mocha-raised: #3D3732; --ap-mocha-line: #4A433D; --ap-mocha-soft: #6B6159; /* muted text on light grounds */ --ap-taupe-deep: #8A7E73; /* strong borders / input outlines */ --ap-wine-deep: #5A2B30; /* primary hover */ --ap-wine-tint: #E7D8D5; /* selected rows, soft badges */ --ap-wine-night: #4A2C30; /* soft wine surface on mocha */ --ap-wine-blush: #E7C3C3; /* wine text on dark surfaces */ /* ---------- Typography ---------- */ --font-sans: var(--font-lahzeh, "Lahzeh"), Tahoma, "Segoe UI", sans-serif; --text-display: clamp(2.75rem, 6vw, 5rem); --lh-display: 1.25; --fw-display: 200; --text-h1: clamp(2.25rem, 4.5vw, 3.5rem); --lh-h1: 1.3; --fw-h1: 200; --text-h2: clamp(1.75rem, 3vw, 2.5rem); --lh-h2: 1.35; --fw-h2: 500; --text-h3: 1.5rem; --lh-h3: 1.5; --fw-h3: 600; --text-title: 1.25rem; --lh-title: 1.6; --fw-title: 600; --text-body-lg: 1.1875rem; --lh-body-lg: 1.95; --text-body: 1.0625rem; --lh-body: 1.95; --text-small: 0.9375rem; --lh-small: 1.85; --text-caption: 0.8125rem; --lh-caption: 1.7; --text-label: 0.875rem; --lh-label: 1.5; --fw-label: 500; --text-micro: 0.75rem; --lh-micro: 1.6; /* badges, tags, tooltips */ /* ---------- Space (4px base) ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ---------- Radius: soft actions, calm surfaces ---------- */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --radius-cta: 14px; /* buttons, CTA band, pagination, floating button — user-chosen (12–16px range) */ --radius-field: var(--radius-md); /* inputs, selects, steppers, choice cards */ --radius-panel: var(--radius-lg); /* alerts, dialogs, inline CTA, toasts */ /* ---------- Size ---------- */ --control-sm: 36px; --control-md: 48px; --control-lg: 56px; --container: 1280px; --container-narrow: 880px; --measure: 62ch; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-theme: 600ms; /* ---------- Layers ---------- */ --z-sticky: 20; --z-drawer: 40; --z-dialog: 50; --z-toast: 60; --z-tooltip: 70; } /* ---------- Light roles (default) ---------- */ :root, [data-theme="light"] { --bg: var(--ap-cream); --bg-raised: var(--ap-cream-raised); --bg-sunken: var(--ap-cream-sunken); --bg-muted: var(--ap-grey); --bg-inverse: var(--ap-mocha); --bg-brand: var(--ap-wine); --text: var(--ap-mocha); --text-muted: var(--ap-mocha-soft); --text-subtle: var(--ap-taupe); /* decorative / disabled only — 2.2:1 on cream, fails even large text */ --text-inverse: var(--ap-cream); --text-on-brand: var(--ap-cream); --text-on-brand-muted: #E3CFCF; --border: var(--ap-sand); --border-strong: var(--ap-taupe-deep); --divider: color-mix(in oklab, var(--ap-sand) 70%, transparent); --primary: var(--ap-wine); --primary-hover: var(--ap-wine-deep); --on-primary: var(--ap-cream); --accent-tint: var(--ap-wine-tint); --on-accent-tint: var(--ap-wine); --link: var(--ap-wine); --focus-ring: var(--ap-wine); --success: #4F6B45; --success-tint: #DFE5D7; --warning: #7A5718; --warning-tint: #EEE2C9; --error: #A1302A; --error-tint: #F1D9D5; --info: #3F5566; --info-tint: #DCE2E6; --overlay: rgb(50 45 41 / 0.55); --skeleton: color-mix(in oklab, var(--ap-sand) 60%, var(--ap-cream)); --shadow-1: 0 1px 2px rgb(50 45 41 / 0.06), 0 4px 12px -4px rgb(50 45 41 / 0.10); --shadow-2: 0 14px 32px -14px rgb(50 45 41 / 0.28); --shadow-3: 0 28px 64px -24px rgb(50 45 41 / 0.42); color-scheme: light; } /* ---------- Dark roles ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--ap-mocha); --bg-raised: var(--ap-mocha-raised); --bg-sunken: var(--ap-mocha-deep); --bg-muted: var(--ap-mocha-line); --bg-inverse: var(--ap-cream); --bg-brand: var(--ap-wine); --text: var(--ap-cream); --text-muted: var(--ap-sand); --text-subtle: var(--ap-taupe); --text-inverse: var(--ap-mocha); --text-on-brand: var(--ap-cream); --text-on-brand-muted: #E3CFCF; --border: var(--ap-mocha-line); --border-strong: var(--ap-taupe-deep); --divider: color-mix(in oklab, var(--ap-mocha-line) 80%, transparent); --primary: var(--ap-cream); --primary-hover: var(--ap-sand); --on-primary: var(--ap-wine); --accent-tint: var(--ap-wine-night); --on-accent-tint: var(--ap-wine-blush); --link: var(--ap-wine-blush); --focus-ring: var(--ap-cream); --success: #A9C29A; --success-tint: #34392F; --warning: #E0B96A; --warning-tint: #40362A; --error: #F09A8F; --error-tint: #45302D; --info: #A9BFD0; --info-tint: #323A40; --overlay: rgb(20 17 15 / 0.7); --skeleton: var(--ap-mocha-line); --shadow-1: 0 1px 2px rgb(0 0 0 / 0.25), 0 4px 12px -4px rgb(0 0 0 / 0.35); --shadow-2: 0 14px 32px -14px rgb(0 0 0 / 0.55); --shadow-3: 0 28px 64px -24px rgb(0 0 0 / 0.7); color-scheme: dark; } } [data-theme="dark"] { --bg: var(--ap-mocha); --bg-raised: var(--ap-mocha-raised); --bg-sunken: var(--ap-mocha-deep); --bg-muted: var(--ap-mocha-line); --bg-inverse: var(--ap-cream); --bg-brand: var(--ap-wine); --text: var(--ap-cream); --text-muted: var(--ap-sand); --text-subtle: var(--ap-taupe); --text-inverse: var(--ap-mocha); --text-on-brand: var(--ap-cream); --text-on-brand-muted: #E3CFCF; --border: var(--ap-mocha-line); --border-strong: var(--ap-taupe-deep); --divider: color-mix(in oklab, var(--ap-mocha-line) 80%, transparent); --primary: var(--ap-cream); --primary-hover: var(--ap-sand); --on-primary: var(--ap-wine); --accent-tint: var(--ap-wine-night); --on-accent-tint: var(--ap-wine-blush); --link: var(--ap-wine-blush); --focus-ring: var(--ap-cream); --success: #A9C29A; --success-tint: #34392F; --warning: #E0B96A; --warning-tint: #40362A; --error: #F09A8F; --error-tint: #45302D; --info: #A9BFD0; --info-tint: #323A40; --overlay: rgb(20 17 15 / 0.7); --skeleton: var(--ap-mocha-line); --shadow-1: 0 1px 2px rgb(0 0 0 / 0.25), 0 4px 12px -4px rgb(0 0 0 / 0.35); --shadow-2: 0 14px 32px -14px rgb(0 0 0 / 0.55); --shadow-3: 0 28px 64px -24px rgb(0 0 0 / 0.7); color-scheme: dark; }