/* ============================================================================ Scarlett St. Claire — design tokens (GENERATED FILE — DO NOT EDIT BY HAND) Built by scripts/build-ds-css.sh from: Scarlett St. Claire Design System for 3.0/tokens/{colors,typography,spacing}.css Edit the token sources in the design system folder, then re-run the script. Any hand edit here is lost on the next build. fonts.css is intentionally excluded — each page loads Google Fonts directly in with preconnect, which is faster than a nested CSS @import. ============================================================================ */ /* --------------------------------------------------------------------------- source: tokens/colors.css --------------------------------------------------------------------------- */ /* ============================================================ Scarlett St. Claire — Color tokens Warm cream + near-black + a single hot magenta-pink accent. Base palette mirrors the live site exactly; oklch refinements apply only where supported. ============================================================ */ :root { /* ── Base palette ─────────────────────────────────────── */ --cream: #FAF6F1; /* primary light background */ --cream-dark: #F0E9E0; /* secondary light — cards, tab bars, chips */ --black: #0E0D0C; /* near-black — nav, hero, dark sections */ --white: #ffffff; --pink: #d4246e; /* brand accent — buttons, eyebrows, active */ --pink-light: #fce8f1; /* pink tint — focus rings, highlights, badges */ --gray: #888076; /* warm gray — secondary text, muted labels */ /* ── Tints & overlays (used inline throughout the site) ── */ --on-dark-1: rgba(255,255,255,.92); /* primary text on dark */ --on-dark-2: rgba(255,255,255,.72); /* secondary text on dark */ --on-dark-3: rgba(255,255,255,.50); /* muted text on dark */ --on-dark-4: rgba(255,255,255,.30); /* faint / ghost on dark */ --hairline-dark: rgba(255,255,255,.08); /* borders on dark */ --hairline-dark-2: rgba(255,255,255,.15); /* borders on dark, hover */ --surface-dark-1: rgba(255,255,255,.04); /* raised card on dark */ --surface-dark-2: rgba(255,255,255,.07); /* raised card on dark, hover */ --hairline: rgba(14,13,12,.08); /* borders on light */ --hairline-strong: rgba(14,13,12,.15); /* borders on light, hover */ --ink-2: rgba(14,13,12,.55); /* secondary ink on light */ --pink-glow: rgba(212,36,110,.12); /* pink shadow / glow */ --scrim: rgba(14,13,12,.88); /* full-screen modal scrim */ --scrim-soft: rgba(14,13,12,.50); /* drawer / nav backdrop */ /* ── Semantic status (admin tools) ────────────────────── */ --ok: #16a34a; --ok-soft: #4ade80; --ok-bg: #e8f5ee; --warn: #f5a623; --warn-bg: #fff8e6; --warn-ink: #7a4800; --danger: #c0392b; --danger-bg: #fdecea; --info: #1565c0; --info-bg: #e3f2fd; /* ── Semantic aliases ─────────────────────────────────── */ --bg-page: var(--cream); --bg-elevated: var(--cream-dark); --bg-card: var(--white); --bg-inverse: var(--black); --text-strong: var(--black); --text-body: var(--gray); --text-accent: var(--pink); --text-on-dark: var(--on-dark-1); --border-card: var(--hairline); --border-focus: var(--pink); --focus-ring: 0 0 0 3px var(--pink-light); } /* Perceptually-tuned pink where oklch is available */ @supports (color: oklch(55% 0.27 350)) { :root { --pink: oklch(55% 0.27 350); --pink-light: oklch(92% 0.06 350); } } /* --------------------------------------------------------------------------- source: tokens/typography.css --------------------------------------------------------------------------- */ /* ============================================================ Scarlett St. Claire — Typography tokens Three families, sharply differentiated by role: - display (Bebas Neue) loud, condensed, all-caps energy - serif (Cormorant italic) editorial, intimate, lowercase - ui (Be Vietnam Pro) crisp labels + readable body ============================================================ */ :root { /* ── Families ─────────────────────────────────────────── */ --font-display: 'Bebas Neue', Impact, sans-serif; /* @kind font */ --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* @kind font */ --font-ui: 'Be Vietnam Pro', Helvetica, Arial, sans-serif; /* @kind font */ /* ── Display scale (Bebas Neue) — fluid ───────────────── */ --d-brand: clamp(72px, 10vw, 140px); /* @kind font */ --d-hero: clamp(60px, 7vw, 104px); /* @kind font */ --d-xl: clamp(48px, 8.5vw, 96px); /* @kind font */ --d-lg: clamp(40px, 5vw, 64px); /* @kind font */ --d-md: 32px; /* product names, card titles @kind font */ --d-sm: 22px; /* small display, slide labels @kind font */ /* ── Serif scale (Cormorant Garamond italic) ──────────── */ --s-display: clamp(42px, 5vw, 68px); /* @kind font */ --s-heading: clamp(28px, 3.5vw, 44px); /* @kind font */ --s-lg: 24px; /* @kind font */ --s-md: 18px; /* bylines, captions @kind font */ --s-sm: 14px; /* card serif captions @kind font */ /* ── UI / body scale (Be Vietnam Pro) ─────────────────── */ --t-lg: 18px; /* @kind font */ --t-md: 15px; /* body default @kind font */ --t-base: 13px; /* dense body, inputs @kind font */ --t-sm: 12px; /* @kind font */ --t-xs: 11px; /* UI labels @kind font */ --t-2xs: 10px; /* small caps labels @kind font */ --t-3xs: 9px; /* micro caps @kind font */ /* ── Weights ──────────────────────────────────────────── */ --w-light: 300; /* @kind other */ --w-reg: 400; /* @kind other */ --w-med: 500; /* @kind other */ --w-semi: 600; /* @kind other */ --w-bold: 700; /* @kind other */ /* ── Tracking (letter-spacing) ────────────────────────── */ --track-display: .04em; /* Bebas display @kind other */ --track-serif: .02em; /* Cormorant @kind other */ --track-eyebrow: .20em; /* uppercase eyebrows @kind other */ --track-label: .14em; /* uppercase UI labels @kind other */ --track-micro: .22em; /* tiny uppercase tags @kind other */ /* ── Line heights ─────────────────────────────────────── */ --lh-display: .90; /* @kind other */ --lh-head: 1.15; /* @kind other */ --lh-body: 1.8; /* @kind other */ --lh-tight: 1.3; /* @kind other */ } /* --------------------------------------------------------------------------- source: tokens/spacing.css --------------------------------------------------------------------------- */ /* ============================================================ Scarlett St. Claire — Spacing, radius, shadow, z-index, motion & layout tokens. No formal numeric scale on the live site; these capture the values used consistently in practice. ============================================================ */ :root { /* ── Spacing scale ────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-25: 100px; --sp-30: 120px; /* Common semantic spacing */ --gap-card: 24px; /* grid gap between cards */ --pad-card: 20px; /* inner card padding */ --pad-section: 80px; /* section vertical padding (desktop) */ --pad-section-x: 64px; /* section horizontal padding (desktop) */ /* ── Border radius ────────────────────────────────────── */ --r-full: 9999px; /* pills, buttons, badges, avatars */ --r-lg: 20px; /* large cards, modals, drawers */ --r: 12px; /* default — cards, inputs */ --r-sm: 6px; /* small elements, chips */ /* ── Borders ──────────────────────────────────────────── */ --border: 1px solid var(--hairline); --border-strong: 1px solid var(--hairline-strong); --border-dark: 1px solid var(--hairline-dark); /* ── Shadows ──────────────────────────────────────────── */ --shadow-card: 0 8px 32px rgba(14,13,12,.10); /* card hover lift */ --shadow-card-dark: 0 8px 24px rgba(212,36,110,.12); /* dark card pink glow */ --shadow-drawer: -8px 0 40px rgba(14,13,12,.12); /* side drawer */ --shadow-soft: 0 2px 12px rgba(14,13,12,.06); /* resting subtle */ /* ── Structural dimensions ────────────────────────────── */ --nav-h: 52px; /* @kind spacing */ --topbar-h: 36px; /* @kind spacing */ --drawer-w: 420px; /* @kind spacing */ --content-max: 1400px; /* @kind spacing */ --content-narrow: 1160px; /* @kind spacing */ /* ── Z-index stack ────────────────────────────────────── */ --z-auth: 10001; /* @kind other */ --z-agegate: 10000; /* @kind other */ --z-cookie: 9999; /* @kind other */ --z-modal: 9000; /* @kind other */ --z-drawer: 210; /* @kind other */ --z-nav: 200; /* @kind other */ --z-scrim: 200; /* @kind other */ --z-mobilemenu: 190; /* @kind other */ --z-topbar: 300; /* @kind other */ --z-tabs: 90; /* @kind other */ /* ── Motion ───────────────────────────────────────────── */ --ease-hover: .2s ease; /* @kind other */ --ease-btn: .22s ease; /* @kind other */ --ease-card: .25s ease; /* @kind other */ --ease-drawer: .35s cubic-bezier(.4,0,.2,1); /* @kind other */ --ease-fade: .5s ease; /* @kind other */ --ease-slide: .8s cubic-bezier(.77,0,.175,1); /* @kind other */ --ease-kenburns: 8s ease-out; /* @kind other */ }