/* ============================================================ THÍCH CAY Design System — tokens.css — v3.3 (2026) ============================================================ Hosted at: https://cdn.thichcay.vn/docs/tokens.css Repo: github.com/thichcayvn/cdn Spec: https://cdn.thichcay.vn/docs/README.md Tagline: Sáng tạo gia vị Việt ╔═ LLM CHEAT SHEET ════════════════════════════════════════════════════════╗ ║ Primary: #B41A1A oklch(.473 .184 27.5) — --primary-600 ║ ║ Surface: #FBF5E7 oklch(.969 .022 88.5) — --brand-surface ║ ║ Card: #FFFCF1 oklch(.992 .018 95.0) — --surface-elevated ║ ║ Text: #2B241E oklch(.220 .010 60.0) — --neutral-800 ║ ║ Display: DVN Luckiest Guy (UPPERCASE only) ║ ║ Heading: Be Vietnam Pro (H1–H6, mixed case) ║ ║ Body: Plus Jakarta Sans (variable 200–800) ║ ║ Mono: Be Vietnam Pro + tabular-nums ║ ║ Logo: Gagalin (logo only — do NOT use in UI) ║ ║ Radius: ≥ 6px (NEVER 0). Default card = --radius-lg = 14px. ║ ║ Shadow: red-tinted rgba(180,26,26,…). NEVER black. ║ ║ Motion: 150ms --ease-bounce by default. ║ ║ Icons: Lucide 2px rounded, colour --brand-accent #FF766A. ║ ║ Emoji: NONE. Use • and — only. ║ ║ Ratio: 60% cream · 30% red+ink · 10% accent ║ ╚════════════════════════════════════════════════════════════════╝ FONT URLS BELOW ARE ABSOLUTE CDN PATHS — file is portable across hosts. ============================================================ */ /* ---------- Fonts ---------- */ /* DVN Luckiest Guy — DISPLAY, ALWAYS UPPERCASE (full vi-VN). Be Vietnam Pro — HEADING (H1-H6) + MONO (proportional, tabular). Plus Jakarta Sans — BODY, UI, button, price, label. Variable. Gagalin — LOGO ONLY (not loaded for UI). */ @font-face { font-family: "DVN Luckiest Guy"; src: url("https://cdn.thichcay.vn/fonts/DVN-LuckiestGuy-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("https://cdn.thichcay.vn/fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url("https://cdn.thichcay.vn/fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 200 800; font-style: italic; font-display: swap; } @font-face { font-family: "Gagalin"; src: url("https://cdn.thichcay.vn/fonts/Gagalin-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } /* Be Vietnam Pro is loaded from Google Fonts via _base.css / per-file . */ :root { /* ======================================================== 4 — COLOR SYSTEM Format: --token: HEX; /* OKLCH · role · use-case */ ========================================================*/ /* 4.1 Brand colors (5 core + 1 elevated) */ --brand-primary: #B41A1A; /* oklch(.473 .184 27.5) · Chilli Red · CTA, headline, ribbon · min 30% of every screen */ --brand-surface: #FBF5E7; /* oklch(.969 .022 88.5) · Cream Paper · PAGE BG (digital) · NEVER #FFFFFF */ --brand-surface-print: #FEF6E7; /* oklch(.972 .020 89.0) · Cream · PRINT/PACKAGING only */ --surface-elevated: #FFFCF1; /* oklch(.992 .018 95.0) · Lifted Cream · ★ CARD/PANEL/SHEET surface · always pair with --shadow-md */ --brand-accent: #FF766A; /* oklch(.710 .180 28.0) · Coral · GRADIENT-FIRST · solid only on items ≤ 48px */ --brand-secondary: #8A4C00; /* oklch(.443 .105 53.4) · Caramel · stamp text, secondary CTA on photo */ --brand-secondary-container: #FFC697; /* oklch(.850 .077 60.5) · Peach · soft container, sticker tag */ /* 4.3 Primary scale — Chilli Red (hue 27.5° locked, only L+C vary) */ --primary-50: #FDF2F2; /* oklch(.974 .013 27.5) · disabled CTA bg */ --primary-100: #FBE3E3; /* oklch(.939 .027 27.5) · toast/alert bg, error-50 */ --primary-200: #F7C0C0; /* oklch(.864 .062 27.5) · soft accent on cream */ --primary-300: #F09494; /* oklch(.768 .106 27.5) · decorative divider */ --primary-400: #E66666; /* oklch(.673 .163 27.5) · hover-light state */ --primary-500: #D63838; /* oklch(.572 .192 27.5) · mid-red */ --primary-600: #B41A1A; /* oklch(.473 .184 27.5) · ★ BRAND PRIMARY — default red */ --primary-700: #921616; /* oklch(.398 .152 27.5) · pressed/active red */ --primary-800: #701111; /* oklch(.319 .119 27.5) · outline on photo bg */ --primary-900: #4E0C0C; /* oklch(.238 .088 27.5) · dark text on cream (rare) */ --primary-950: #2C0707; /* oklch(.158 .055 27.5) · almost-black red, reserved */ /* 4.4 Neutral scale — warm-tinted (hue 45–88), never gray-cold */ --neutral-0: #FFFFFF; /* oklch(1.000 0 0) · RESERVED — do NOT use as page bg */ --neutral-50: #FBF5E7; /* oklch(.969 .022 88.5) · ★ same as --brand-surface */ --neutral-100: #F8F0DC; /* oklch(.953 .033 86.0) · section alt bg */ --neutral-200: #EDE3CC; /* oklch(.911 .044 84.0) · border default */ --neutral-300: #D6CAB0; /* oklch(.829 .053 80.0) · border strong, dividers */ --neutral-400: #A89B82; /* oklch(.678 .045 73.0) · disabled text */ --neutral-500: #7A6E58; /* oklch(.522 .035 70.0) · subtle text, caption */ --neutral-600: #5C5142; /* oklch(.408 .028 65.0) · muted text */ --neutral-700: #3D352B; /* oklch(.291 .021 60.0) · body text */ --neutral-800: #2B241E; /* oklch(.220 .010 60.0) · ★ DEFAULT TEXT — body, heading */ --neutral-900: #1A1612; /* oklch(.143 .007 58.0) · highest contrast · REPLACES pure black */ /* 4.5 Semantic (use sparingly — brand red dominates) */ --success: #16A34A; /* fg · confirmation, herb callout */ --success-bg: #DCFCE7; /* bg · success container */ --warning: #EAB308; /* fg · soft alert (Sắp hết) */ --warning-bg: #FEF9C3; /* bg · warning container */ --error: #DC2626; /* fg · form error (NOT brand red — distinct for accessibility) */ --error-bg: #FEE2E2; /* bg · error container */ --info: #2563EB; /* fg · neutral system message */ --info-bg: #DBEAFE; /* bg · info container */ /* 4.6 Signature gradient — Primary → Coral, 135° USE: primary CTA button fill (default), hero highlight stroke (rare). NEVER: body bg, section bg, text fill. */ --gradient-signature: linear-gradient(135deg, #B41A1A 0%, #FF766A 100%); /* Semantic surfaces & text */ --color-bg: var(--brand-surface); --color-surface: var(--surface-elevated); /* ★ default card surface */ --color-surface-alt: var(--neutral-100); --color-fg: var(--neutral-800); --color-fg-muted: var(--neutral-600); --color-fg-subtle: var(--neutral-500); --color-fg-inverse: var(--brand-surface); --color-border: var(--neutral-200); --color-border-strong:var(--neutral-300); --color-divider: var(--neutral-200); --color-on-primary: var(--brand-surface); --color-on-accent: var(--brand-surface); /* ======================================================== 5 — TYPOGRAPHY (4-font stack) ========================================================*/ --font-display: "DVN Luckiest Guy", "Luckiest Guy", cursive; --font-heading: "Be Vietnam Pro", system-ui, -apple-system, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --font-mono: "Be Vietnam Pro", ui-monospace, "SF Mono", monospace; --font-logo: "Gagalin", sans-serif; /* logo only */ /* Type scale — 26 tokens */ /* Display (DVN Luckiest Guy, UPPERCASE) */ --fs-display-2xl: 72px; --lh-display-2xl: 1.1; --ls-display-2xl: -0.02em; --fs-display-xl: 60px; --lh-display-xl: 1.1; --ls-display-xl: -0.02em; --fs-display-lg: 48px; --lh-display-lg: 1.1; --ls-display-lg: -0.01em; --fs-display-md: 36px; --lh-display-md: 1.1; --ls-display-md: 0; /* Heading (Be Vietnam Pro, mixed case) */ --fs-h1: 36px; --lh-h1: 1.2; --ls-h1: -0.02em; --fw-h1: 800; --fs-h2: 30px; --lh-h2: 1.25; --ls-h2: -0.01em; --fw-h2: 700; --fs-h3: 24px; --lh-h3: 1.3; --ls-h3: -0.01em; --fw-h3: 700; --fs-h4: 20px; --lh-h4: 1.35; --ls-h4: 0; --fw-h4: 600; --fs-h5: 18px; --lh-h5: 1.4; --ls-h5: 0; --fw-h5: 600; --fs-h6: 16px; --lh-h6: 1.4; --ls-h6: 0; --fw-h6: 600; /* Body (Plus Jakarta Sans) */ --fs-body-xl: 20px; --lh-body-xl: 1.5; --fs-body-lg: 18px; --lh-body-lg: 1.5; --fs-body: 16px; --lh-body: 1.5; --fs-body-sm: 14px; --lh-body-sm: 1.5; --fs-caption: 12px; --lh-caption: 1.4; --ls-caption: 0.02em; /* Label (Plus Jakarta UPPERCASE) */ --fs-label-lg: 14px; --lh-label-lg: 1.2; --ls-label-lg: 0.04em; --fw-label-lg: 600; --fs-label: 12px; --lh-label: 1.2; --ls-label: 0.06em; --fw-label: 600; --fs-label-sm: 11px; --lh-label-sm: 1.2; --ls-label-sm: 0.08em; --fw-label-sm: 700; --fs-overline: 11px; --lh-overline: 1.4; --ls-overline: 0.08em; /* Button (Plus Jakarta UPPERCASE) */ --fs-button-lg: 16px; --lh-button-lg: 1; --ls-button-lg: 0.04em; --fs-button: 14px; --lh-button: 1; --ls-button: 0.04em; --fs-button-sm: 13px; --lh-button-sm: 1; --ls-button-sm: 0.04em; /* Price (Plus Jakarta) */ --fs-price-lg: 24px; --lh-price-lg: 1.2; --ls-price-lg: -0.01em; --fs-price: 18px; --lh-price: 1.2; --fs-price-original: 14px; --lh-price-original: 1.2; /* Mono (Be Vietnam Pro w/ tabular-nums) */ --fs-mono-lg: 16px; --lh-mono-lg: 1.5; --fs-mono: 14px; --lh-mono: 1.5; --fs-mono-sm: 12px; --lh-mono-sm: 1.5; /* ======================================================== 6 — SPACING / RADIUS / SHADOW ========================================================*/ /* 6.1 Spacing (4px base) */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; /* base */ --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* 6.2 Border radius — HOUSE RULE: never 0, always ≥ 6px. */ --radius-sm: 6px; /* inline tag, code chip */ --radius-md: 10px; /* input, small button */ --radius-lg: 14px; /* ★ DEFAULT card radius */ --radius-xl: 18px; /* modal, sheet */ --radius-2xl: 26px; /* hero card */ --radius-3xl: 36px; /* promo block, KV frame */ --radius-pill: 9999px; /* button (all), chip, badge */ --radius-full: 50%; /* avatar, status dot */ /* 6.3 Shadow tokens — RED-TINTED (rgba 180,26,26) · never pure black */ --shadow-xs: 0 1px 2px 0 rgba(180, 26, 26, 0.05); /* hairline lift */ --shadow-sm: 0 1px 3px 0 rgba(180, 26, 26, 0.08), 0 1px 2px -1px rgba(180, 26, 26, 0.06); /* sticky header on scroll */ --shadow-md: 0 4px 6px -1px rgba(180, 26, 26, 0.08), 0 2px 4px -2px rgba(180, 26, 26, 0.06); /* ★ default card */ --shadow-lg: 0 10px 15px -3px rgba(180, 26, 26, 0.10), 0 4px 6px -4px rgba(180, 26, 26, 0.05); /* hover, modal */ --shadow-xl: 0 20px 25px -5px rgba(180, 26, 26, 0.12), 0 8px 10px -6px rgba(180, 26, 26, 0.08); /* hero card */ --shadow-cta:0 8px 24px -8px rgba(180, 26, 26, 0.45); /* primary CTA glow */ /* 7.1 Breakpoints */ --screen-sm: 640px; --screen-md: 768px; --screen-lg: 1024px; --screen-xl: 1280px; --screen-2xl: 1536px; /* 7.2 Z-index */ --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-overlay: 30; --z-drawer: 40; --z-modal: 50; --z-popover: 60; --z-tooltip: 70; --z-toast: 80; --z-max: 9999; /* 8 Motion */ --duration-instant: 100ms; --duration-fast: 150ms; /* default for hover/focus */ --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================ Semantic text utility classes (v3.3 — 26 tokens) ============================================================ */ /* Display (opt-in only via class) */ .tc-display-2xl, .tc-display-xl, .tc-display-lg, .tc-display-md, .display { font-family: var(--font-display); text-transform: uppercase; color: var(--brand-primary); } .tc-display-2xl { font-size: var(--fs-display-2xl); line-height: var(--lh-display-2xl); letter-spacing: var(--ls-display-2xl); } .tc-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); } .tc-display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: var(--ls-display-lg); } .tc-display-md { font-size: var(--fs-display-md); line-height: var(--lh-display-md); } /* Heading (Be Vietnam Pro — default for H1-H6) */ .tc-h1 { font-family: var(--font-heading); font-weight: var(--fw-h1); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); color: var(--neutral-800); } .tc-h2 { font-family: var(--font-heading); font-weight: var(--fw-h2); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: var(--neutral-800); } .tc-h3 { font-family: var(--font-heading); font-weight: var(--fw-h3); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--neutral-800); } .tc-h4 { font-family: var(--font-heading); font-weight: var(--fw-h4); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--neutral-800); } .tc-h5 { font-family: var(--font-heading); font-weight: var(--fw-h5); font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--neutral-800); } .tc-h6 { font-family: var(--font-heading); font-weight: var(--fw-h6); font-size: var(--fs-h6); line-height: var(--lh-h6); color: var(--neutral-800); } /* Body (Plus Jakarta Sans) */ .tc-body-xl { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-xl); line-height: var(--lh-body-xl); color: var(--neutral-700); } .tc-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--neutral-700); } .tc-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--neutral-700); } .tc-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--neutral-700); } .tc-caption { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--neutral-600); } /* Label (Plus Jakarta UPPERCASE) */ .tc-label-lg { font-family: var(--font-body); font-weight: var(--fw-label-lg); font-size: var(--fs-label-lg); line-height: var(--lh-label-lg); letter-spacing: var(--ls-label-lg); text-transform: uppercase; color: var(--neutral-700); } .tc-label { font-family: var(--font-body); font-weight: var(--fw-label); font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--neutral-700); } .tc-label-sm { font-family: var(--font-body); font-weight: var(--fw-label-sm); font-size: var(--fs-label-sm); line-height: var(--lh-label-sm); letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--neutral-600); } .tc-overline { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-overline); line-height: var(--lh-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--brand-primary); } /* Button (Plus Jakarta UPPERCASE Bold) */ .tc-button-lg { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-button-lg); line-height: var(--lh-button-lg); letter-spacing: var(--ls-button-lg); text-transform: uppercase; } .tc-button { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-button); line-height: var(--lh-button); letter-spacing: var(--ls-button); text-transform: uppercase; } .tc-button-sm { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-button-sm); line-height: var(--lh-button-sm); letter-spacing: var(--ls-button-sm); text-transform: uppercase; } /* Price (Plus Jakarta Bold) */ .tc-price-lg { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-price-lg); line-height: var(--lh-price-lg); letter-spacing: var(--ls-price-lg); color: var(--brand-primary); } .tc-price { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-price); line-height: var(--lh-price); color: var(--brand-primary); } .tc-price-original { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-price-original); line-height: var(--lh-price-original); color: var(--neutral-500); text-decoration: line-through; } /* Mono (Be Vietnam Pro w/ tabular numbers) */ .tc-mono-lg, .tc-mono, .tc-mono-sm, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .tc-mono-lg { font-size: var(--fs-mono-lg); line-height: var(--lh-mono-lg); font-weight: 500; } .tc-mono { font-size: var(--fs-mono); line-height: var(--lh-mono); font-weight: 400; } .tc-mono-sm { font-size: var(--fs-mono-sm); line-height: var(--lh-mono-sm); font-weight: 400; }