/* ============================================================ Gamistu landing tokens v4 — 2026-05-21 · brand-synced 2026-07-28 Source of truth: GamistuMain/apps/web/app/globals.css :root (LIVE app) Locked: Grape primary + Saffron accent + warm cream/violet neutrals 2026-07-28 — brand sync. Landing was still on the pre-rebrand Plum (#8B3A62 primary, cream #fdf8f3, brown-black ink) while the app has run the violet-grape painterly palette since the Home rebrand 2026-06-16. Clicking a CTA moved you between two different-looking brands. The ramps below are retargeted to the LIVE hexes; the `--plum-*` / `--stone-*` variable NAMES are kept exactly as-is, same call the app made, so none of the ~1400 lines of component CSS had to change. ⚠ Ramp step ≠ app ramp step. Landing primary is `--plum-600`, app primary is `plum.400` — map by HEX, never by number. ⚠ Lagging sources that still say Plum: packages/config/src/tokens.ts, GamistuMain/DESIGN.md, .claude/rules/design.md. Do not copy from them. Compat: re-exports --color-* names for v3 sections (pricing/CTA) coexist ============================================================ */ /* Lora vendored locally 2026-07-28 (variable font, one file per subset). Was a runtime @import from fonts.googleapis.com — render-blocking third-party request on the front door, and every heading fell back to Georgia when it was slow. Inter + JetBrains Mono are already local in tokens.css. */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/lora-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/lora-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/lora-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Grape scale — name kept `plum-*`, ramp points at Grape (app parity). 600 = primary #5B2C63 (app plum.400) · 700 = hover · 800 = active */ --plum-50: #F7F1F9; --plum-100: #EAD8EE; --plum-200: #D4B3DC; --plum-300: #A878B4; --plum-400: #7A4487; --plum-500: #6B3574; --plum-600: #5B2C63; --plum-700: #4A2350; --plum-800: #3C1D42; --plum-900: #1B0D20; /* Saffron — unchanged, the one token landing and app already shared */ --saffron-100: #FCF4DD; --saffron-200: #F8E5A8; --saffron-400: #F2D26B; --saffron-500: #E8B83E; --saffron-600: #C99928; --saffron-700: #B8870A; /* Painterly vocab (app Home rebrand) — accents, never primary CTA */ --violet: #7C5CE6; --violet-soft: #A88DF2; --grape: #5B2C63; --magenta: #D9489C; --amber: #F0922C; --gold: #E9B53C; --sky: #5B8DEF; --rose: #E5638C; --grad-brand: linear-gradient(135deg, var(--violet), var(--magenta)); --grad-grape: linear-gradient(135deg, var(--plum-700), var(--plum-500)); /* Vector clusters — radar semantics, app parity */ --cluster-cog: #7F77DD; --cluster-soc: #D4537E; --cluster-self: #1D9E75; --cluster-app: #EF9F27; /* Status */ --mint-500: #10B981; --terracotta: #993C1D; --mauve: #6B5B95; /* Neutrals — warm lines + violet-tinted ink, mirroring the app. Lines/surfaces stay warm stone; text ramps toward violet-dark. */ --cream: #F3EDE2; --stone-50: #FBF7F0; --stone-100: #F4EDE2; --stone-200: #ECE3D5; --stone-300: #B4ABBC; --stone-400: #8B8095; --stone-500: #6F6479; --stone-600: #5C5266; --stone-700: #3A3348; --stone-800: #1E1828; --stone-900: #2B2433; /* Diamond */ --diamond: #6366f1; /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* Shadow — warm-grape tint, never pure black */ --shadow-sm: 0 1px 2px rgba(27,13,32,.06), 0 1px 1px rgba(27,13,32,.04); --shadow-md: 0 4px 12px rgba(27,13,32,.08), 0 2px 4px rgba(27,13,32,.04); --shadow-lg: 0 10px 32px rgba(27,13,32,.10), 0 4px 8px rgba(27,13,32,.06); --shadow-pop: 0 16px 48px rgba(27,13,32,.18); /* Font */ --font-display: 'Lora', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Motion — durations từ token app 2026-06-14. Đúng HAI đường cong cho cả trang; thêm cái thứ ba là ease-sprawl (preflight bắt). */ --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 500ms; --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* ===== Back-compat with v3 --color-* names (so v3 sections still work) ===== */ --color-primary: var(--plum-600); --color-primary-hover: var(--plum-700); --color-primary-active: var(--plum-800); --color-primary-soft: var(--plum-100); --color-primary-fg: #FBF4FF; --color-accent: var(--saffron-500); --color-accent-hover: var(--saffron-600); --color-accent-soft: var(--saffron-100); --color-accent-fg: var(--plum-900); --color-success: var(--mint-500); --color-success-soft: #ECFDF5; --color-warning: #B8870A; --color-error: var(--terracotta); --color-error-soft: #FFF1EE; --color-info: var(--mauve); --color-info-soft: #EDEAF5; --color-bg-base: var(--cream); --color-bg-surface: #ffffff; --color-bg-muted: var(--stone-50); --color-bg-reading: #ffffff; --color-text-primary: var(--stone-900); --color-text-secondary: var(--stone-600); --color-text-muted: var(--stone-400); --color-text-inverse: #ffffff; --color-border-default: var(--stone-200); --color-border-strong: var(--stone-300); --color-border-focus: var(--plum-500); --color-vector-cognitive: var(--cluster-cog); --color-vector-social: var(--cluster-soc); --color-vector-self: var(--cluster-self); --color-vector-applied: var(--cluster-app); --shadow: var(--shadow-sm); --radius-sm: var(--r-sm); --radius-base: 6px; --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); --radius-2xl: 20px; --radius-3xl: var(--r-xl); --radius-full: var(--r-pill); --font-sans: var(--font-body); } /* ============================================================ Dark scheme tokens (html.ld-dark) — brand-synced 2026-07-28 Mirrors the app's `.dark` block: violet-dark grounds, light grape accents, Saffron kept as-is (~10:1 on dark). Pages consume these `--d-*` names instead of hardcoding tints, so both landings flip from one place. Grape on dark reads LIGHTER than on light — the opposite direction from the light ramp, same as the app. ============================================================ */ html.ld-dark { --d-bg: #131019; /* page ground */ --d-bg-2: #191426; /* alternating section */ --d-surface: #1E1828; /* card */ --d-line: #332B44; /* border */ --d-line-2: #463C5C; /* border, emphasis */ --d-ink: #F1ECF7; /* heading */ --d-ink-2: #C4BAD3; /* body */ --d-ink-3: #9A8FAE; /* muted, caption */ --d-primary: #B576C4; /* link, accent text, active hairline */ --d-primary-soft: #D9BFE4; /* logo, soft accent text */ --d-btn: #7A4487; /* filled CTA — keeps light text like light mode */ --d-btn-hover: #8E5199; --d-tint: rgba(181,118,196,0.13); /* chip / soft fill */ --d-tint-hi: rgba(181,118,196,0.10); /* ghost hover */ } @keyframes pulseSaffron { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,184,62,0.5); } 50% { box-shadow: 0 0 0 8px rgba(232,184,62,0); } }