/** * Thơm — Design Tokens * ============================================================================= * SINGLE SOURCE OF TRUTH for the design system. * * Values marked [FIGMA] are read verbatim from the design: the "Style * Sheet" frame (desktop, 1400 × 1803) and the "Mobile Typography" frame * (390px). Values marked [DERIVED] are not specified in either frame and * were chosen here — they are the only numbers in this file that did not * come from the design. * ============================================================================= */ :root { /* --------------------------------------------------------------------- * 1. COLOUR [FIGMA] — all 11 swatches, verbatim * ------------------------------------------------------------------- */ --c-ink: #2C1F0E; --c-cream: #F7F0E6; --c-warm-cream: #FBF3E2; --c-sand: #EDE3D4; --c-card: #F2EAD8; --c-gold: #C8860A; --c-gold-deep: #8A5A05; --c-gold-light: #E8A828; --c-muted: #6B5636; /* as applied to text nodes (the text/secondary variable is #6B5C3E but is not bound to these layers) */ --c-white: #FFFFFF; --c-taupe: #C8B89A; /* --- Semantic assignments: what the templates actually reference --- * Components never name a swatch directly, so re-pointing an alias * re-themes every place it is used. */ --c-bg: var(--c-cream); --c-bg-alt: var(--c-warm-cream); --c-bg-inverse: var(--c-ink); --c-surface: var(--c-white); --c-surface-sunken: var(--c-card); --c-text: var(--c-ink); --c-text-muted: var(--c-muted); --c-text-subtle: var(--c-taupe); --c-text-inverse: var(--c-cream); --c-text-on-brand: var(--c-ink); /* gold button label is Ink */ --c-text-on-dark: var(--c-cream); --c-border: var(--c-sand); --c-border-strong: var(--c-taupe); --c-border-inverse: rgb(255 255 255 / 0.12); /* hairline on the Ink footer */ --c-rule: rgb(44 31 14 / 0.10); /* horizontal divider */ --c-rule-soft: rgb(44 31 14 / 0.12); /* stat column separator */ --c-border-subtle: rgb(44 31 14 / 0.20); /* unselected pill */ --c-surface-inverse: rgb(255 255 255 / 0.06); /* image well on the Ink band */ --scrim-bottom: linear-gradient(to top, rgb(44 31 14 / 0.72), rgb(44 31 14 / 0)); --c-hero-blob: var(--c-gold-light); /* at 15% opacity [FIGMA] */ --c-glass: rgb(255 255 255 / 0.85); /* hero card [FIGMA] */ --c-action: var(--c-gold); --c-action-hover: var(--c-gold-deep); --c-action-active: var(--c-gold-deep); --c-action-subtle: var(--c-card); --c-focus-ring: var(--c-gold-deep); --c-price: var(--c-ink); --c-sale: var(--c-gold-deep); /* Feedback [DERIVED] — no feedback colours in the Figma sheet. * Hues are pulled toward the warm palette so notices do not look foreign. */ --c-success: #3F7D4E; --c-warning: var(--c-gold-deep); --c-danger: #A33A22; --c-info: var(--c-muted); --c-success-bg: #EAF1E9; --c-warning-bg: var(--c-warm-cream); --c-danger-bg: #F7E8E2; --c-info-bg: var(--c-card); /* --------------------------------------------------------------------- * 2. TYPOGRAPHY [FIGMA] * * Figma families: Fraunces (display) and Source Sans 3 (body). * Figma weights: Fraunces Black 900, Fraunces Bold 700, * Source Sans 3 Regular 400 / Medium 500 / SemiBold 600. * ------------------------------------------------------------------- */ --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; /* Fraunces variable axes used throughout the design. */ --font-display-variation: "SOFT" 0, "WONK" 1; --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* Weights [FIGMA] */ --fw-regular: 400; /* Source Sans 3 Regular */ --fw-medium: 500; /* Source Sans 3 Medium */ --fw-semibold: 600; /* Source Sans 3 SemiBold */ --fw-bold: 700; /* Fraunces Bold */ --fw-black: 900; /* Fraunces Black */ /* Type scale — size, line-height and tracking per style. * Sizes: both clamp ends exact — mobile frame 390px -> page design * frame 1082px (the width the composition is actually drawn at). * Line-height and letter-spacing: read from the Figma VARIABLES on * "Thơm Website — Option 1 v2". Figma stores tracking as a percentage, * converted here to em (e.g. -2.6% -> -0.026em). */ --fs-display: clamp(3rem, 1.6263rem + 5.6358vw, 5.4375rem); /* 48 -> 87px */ --lh-display: 0.92; --ls-display: -0.026em; --fs-h1: clamp(2rem, 1.4364rem + 2.3121vw, 3rem); /* 32 -> 48px */ --lh-h1: 1.02; --ls-h1: -0.025em; --fs-h2: clamp(1.75rem, 1.3273rem + 1.7341vw, 2.5rem); /* 28 -> 40px */ --lh-h2: 1; --ls-h2: -0.02em; --fs-h3: clamp(1.5rem, 1.0773rem + 1.7341vw, 2.25rem); /* 24 -> 36px */ --lh-h3: 1.04; --ls-h3: -0.02em; --fs-h4: clamp(1.25rem, 1.1796rem + 0.2890vw, 1.375rem); /* 20 -> 22px */ --lh-h4: 1.18; --ls-h4: -0.015em; --fs-h5: clamp(1.125rem, 1.0546rem + 0.2890vw, 1.25rem); /* 18 -> 20px */ --lh-h5: 1.32; --ls-h5: 0; --fs-lead: clamp(1rem, 0.9296rem + 0.2890vw, 1.125rem); /* 16 -> 18px */ --lh-lead: 1.6; --ls-lead: 0; --fs-base: 0.9375rem; /* 15px */ --lh-base: 1.6; --ls-base: 0.0733em; /* 1.1px on 15px */ --fs-small: 0.8125rem; /* 13px, Medium 500 */ --lh-small: 1.5; --ls-small: 0.0592em; /* 0.77px on 13px */ --fs-label: clamp(0.6875rem, 0.6523rem + 0.1445vw, 0.75rem); /* 11 -> 12px */ --lh-label: 1.4; --ls-label: 0.08em; /* Generic aliases, for places with no matching Figma style. */ --lh-tight: var(--lh-h1); --lh-snug: var(--lh-h4); --lh-normal: var(--lh-base); --lh-relaxed: var(--lh-lead); --ls-normal: 0; --ls-wide: 0.04em; /* [DERIVED] */ --ls-wider: var(--ls-label); /* --------------------------------------------------------------------- * 3. SPACING [FIGMA] — the 9 space/* variables, verbatim. * Token number = the px value ÷ 4. The design defines no other steps. * NOTE: the separate "Style Sheet" image also showed 20px and 80px bars; * the live variables in this file do not define them. Variables win. * ------------------------------------------------------------------- */ --sp-0: 0; --sp-1: 0.25rem; /* 4 space/2xs */ --sp-2: 0.5rem; /* 8 space/xs */ --sp-3: 0.75rem; /* 12 space/sm */ --sp-4: 1rem; /* 16 space/md */ --sp-6: 1.5rem; /* 24 space/lg */ --sp-8: 2rem; /* 32 space/xl */ --sp-12: 3rem; /* 48 space/2xl */ --sp-16: 4rem; /* 64 space/3xl */ --sp-24: 6rem; /* 96 space/4xl */ /* Section rhythm [DERIVED] — composed from Figma steps. */ --sp-section: clamp(var(--sp-16), 8vw, var(--sp-24)); /* 64 -> 96 */ --sp-section-sm: clamp(var(--sp-12), 5vw, var(--sp-16)); /* 48 -> 64 */ /* --------------------------------------------------------------------- * 4. LAYOUT [DERIVED] * The Style Sheet frame is 1400px wide with 105px side padding, giving a * 1190px content column. Confirm against a real page frame if one exists. * ------------------------------------------------------------------- */ --container-max: 890px; /* [FIGMA] content column on the page frame */ --container-wide: 1082px; /* [FIGMA] full page frame width */ --container-text: 68ch; --gutter: clamp(var(--sp-4), 4vw, var(--sp-24)); /* 16 -> 96 [FIGMA] */ --grid-columns: 12; --grid-gap: clamp(var(--sp-4), 2vw, var(--sp-8)); /* --------------------------------------------------------------------- * 5. RADII, BORDERS, SHADOW [DERIVED] * Not specified in the Style Sheet. The swatch chips are drawn with a * ~8px corner, which is what --radius-md reflects. * ------------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --radius-circle: 50%; --border-width: 1px; --border-width-thick: 2px; --shadow-sm: 0 1px 2px rgb(44 31 14 / 0.06); --shadow-md: 0 4px 12px rgb(44 31 14 / 0.08); --shadow-lg: 0 12px 32px rgb(44 31 14 / 0.10); /* --------------------------------------------------------------------- * 6. MOTION [DERIVED] * ------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 400ms; /* --------------------------------------------------------------------- * 7. Z-INDEX [DERIVED] * ------------------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-overlay: 400; --z-modal: 500; } /** * Breakpoints [DERIVED] — documented here, but they must be literals in * media queries because custom properties cannot be used in @media. * sm 480px md 768px lg 1024px xl 1280px * * Figma reference frames: mobile 390px, desktop 1440px (content 1400px). */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }