/* ================================================================= Lingeva · Design Tokens · v0.1 The single source of truth for color, type, spacing, radius, shadow, motion, and state. Consumed by every screen. ================================================================= */ /* ───────────────────────────────────────────────────────────────── Vietnamese glyph stitch for the display serif. The brand title face "DM Serif Display" (Google Fonts) ships only Latin + Latin-Ext subsets — it has NO Vietnamese coverage. So large VI titles (e.g. "Cơ bản về phỏng vấn xin việc") lost their stacked tone marks: the browser fell back per-glyph to a mismatched system serif and, on some platforms, decomposed them into detached base+combining marks. Fix: register the Vietnamese subset of a weight-matched Didone (Playfair Display 600 ≈ DM Serif Display's heavy contrast) UNDER THE SAME family name, scoped to the Vietnamese unicode-range. The browser then draws Latin/German from DM Serif and only the Vietnamese-specific codepoints from Playfair — automatically for EVERY use of the family (var-based or hardcoded), with zero change to non-Vietnamese text. The 5.7 KB subset is self-hosted and, thanks to unicode-range, only downloads when a Vietnamese glyph is actually rendered. ───────────────────────────────────────────────────────────────── */ @font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/playfair-display-600-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; } /* ───────────────────────────────────────────────────────────────── 1 · BASE TYPE & MOTION (mode-agnostic) ───────────────────────────────────────────────────────────────── */ :root { /* Font stacks */ --dm-font-serif: "DM Serif Display", "Iowan Old Style", Georgia, serif; --dm-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --dm-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale — semantic */ --dm-type-display: 400 3rem/1.05 var(--dm-font-serif); --dm-type-h1: 400 2rem/1.12 var(--dm-font-serif); --dm-type-h2: 400 1.5rem/1.18 var(--dm-font-serif); --dm-type-h3: 600 1rem/1.4 var(--dm-font-sans); --dm-type-eyebrow: 600 0.6875rem/1.4 var(--dm-font-sans); --dm-type-body: 400 1rem/1.55 var(--dm-font-sans); --dm-type-body-sm: 400 0.875rem/1.5 var(--dm-font-sans); --dm-type-caption: 400 0.75rem/1.45 var(--dm-font-sans); --dm-type-mono: 500 0.78125rem/1.55 var(--dm-font-mono); --dm-type-german-lg: 500 1.5rem/1.35 var(--dm-font-sans); /* key DE sentence in scenario */ --dm-type-german-body: 400 1.125rem/1.55 var(--dm-font-sans); /* DE content body */ --dm-type-button: 600 0.9375rem/1.2 var(--dm-font-sans); --dm-type-badge: 600 0.6875rem/1 var(--dm-font-sans); --dm-type-feedback: 500 0.875rem/1.5 var(--dm-font-sans); /* Letterspacing tokens */ --dm-ls-tight: -0.015em; --dm-ls-normal: 0; --dm-ls-wide: 0.04em; --dm-ls-eyebrow: 0.12em; /* Spacing (4pt base) */ --dm-s-1: 4px; --dm-s-2: 8px; --dm-s-3: 12px; --dm-s-4: 16px; --dm-s-5: 20px; --dm-s-6: 24px; --dm-s-7: 32px; --dm-s-8: 40px; --dm-s-9: 48px; --dm-s-10: 64px; --dm-s-11: 80px; /* Semantic spacing */ --dm-page-pad-mobile: 20px; /* horizontal page padding on phones */ --dm-page-pad-desktop: 48px; --dm-card-pad: 16px; /* default card inner padding */ --dm-card-pad-lg: 20px; /* featured cards */ --dm-section-gap: 32px; /* between dashboard bands */ --dm-stack-gap: 12px; /* between sibling items in a list */ /* Radius */ --dm-r-xs: 4px; --dm-r-sm: 6px; --dm-r-md: 10px; --dm-r-lg: 14px; --dm-r-xl: 20px; --dm-r-card: var(--dm-r-lg); --dm-r-button: 999px; /* pill */ --dm-r-badge: 999px; --dm-r-mic: 999px; /* always circular */ /* Touch targets */ --dm-tap-min: 44px; /* WCAG floor */ --dm-tap-comfy: 48px; /* preferred */ --dm-mic-size-mobile: 88px; /* mic primary affordance */ --dm-mic-size-desktop: 96px; /* Motion — ease */ --dm-ease-default: cubic-bezier(0.2, 0.7, 0.2, 1); --dm-ease-in: cubic-bezier(0.4, 0, 1, 1); --dm-ease-out: cubic-bezier(0, 0, 0.2, 1); /* Motion — duration */ --dm-d-fast: 120ms; --dm-d-base: 200ms; --dm-d-slow: 320ms; --dm-d-pulse: 1400ms; /* mic recording pulse */ --dm-d-feedback: 240ms; /* feedback reveal */ /* Z-index */ --dm-z-base: 0; --dm-z-raised: 10; --dm-z-sticky: 100; --dm-z-tabbar: 200; --dm-z-modal: 1000; --dm-z-toast: 1100; /* CEFR per-level badge TINTS — soft surface fills paired with the --dm-level-* text colors above. Derived via color-mix from the level swatch + the current surface, so a single definition auto-adapts to light/dark (custom properties resolve lazily at use time). This is the centralized "per-level badge color set": text = --dm-level-X, background = --dm-level-X-bg. */ --dm-level-a1-bg: color-mix(in oklab, var(--dm-level-a1) 16%, var(--dm-surface)); --dm-level-a2-bg: color-mix(in oklab, var(--dm-level-a2) 16%, var(--dm-surface)); --dm-level-b1-bg: color-mix(in oklab, var(--dm-level-b1) 16%, var(--dm-surface)); --dm-level-b2-bg: color-mix(in oklab, var(--dm-level-b2) 16%, var(--dm-surface)); --dm-level-c1-bg: color-mix(in oklab, var(--dm-level-c1) 16%, var(--dm-surface)); } /* ───────────────────────────────────────────────────────────────── 2 · LIGHT MODE (default) ───────────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* Surfaces */ --dm-canvas: #faf7f1; /* warm paper */ --dm-surface: #ffffff; --dm-surface-raised:#ffffff; --dm-surface-sunken:#f3efe6; /* input fields, code blocks */ --dm-overlay: rgba(20, 17, 12, 0.5); /* Text */ --dm-ink: #1c1815; /* primary — warm near-black */ --dm-ink-2: #5a5147; /* secondary */ --dm-ink-3: #8a8074; /* muted */ --dm-ink-on-accent: #ffffff; --dm-ink-on-brass: #1c1815; /* dark text on brass */ /* Lines */ --dm-line: #e6dfd1; --dm-line-2: #d4cab8; /* Brand & action */ --dm-brass: #c4924a; /* primary action / mic / CTAs */ --dm-brass-hover: #b07f3a; --dm-brass-press: #9c6e2e; --dm-brass-tint: rgba(196, 146, 74, 0.10); --dm-ink-deep: #2b2a35; /* secondary brand — grammar/links */ --dm-ink-deep-hover:#3b4063; --dm-ink-deep-tint:rgba(43, 42, 53, 0.06); /* Semantic state */ --dm-ok: #6d8a52; /* warm sage — "strong" */ --dm-ok-tint:rgba(109, 138, 82, 0.10); --dm-warn: #c89346; /* amber */ --dm-warn-tint:rgba(200, 147, 70, 0.10); --dm-danger: #b8523f; /* warm clay */ --dm-danger-tint:rgba(184, 82, 63, 0.10); --dm-info: #5a6da6; /* muted indigo */ --dm-info-tint:rgba(90, 109, 166, 0.10); --dm-muted: #8a8074; --dm-locked: #b6ad9f; /* CEFR level swatches */ --dm-level-a1: #7a9b5e; /* sage */ --dm-level-a2: #c89346; /* amber */ --dm-level-b1: #c47a3a; /* burnt orange */ --dm-level-b2: #5a6da6; /* indigo */ --dm-level-c1: #c0392b; /* warm red, aligned with Grammar C1 */ /* Mastery state — visual scale (fill density via opacity) */ --dm-mastery-0: #d4cab8; /* unseen — line color */ --dm-mastery-1: rgba(196, 146, 74, 0.28); --dm-mastery-2: rgba(196, 146, 74, 0.52); --dm-mastery-3: rgba(196, 146, 74, 0.78); --dm-mastery-4: var(--dm-brass); /* Mic states */ --dm-mic-idle-bg: var(--dm-brass); --dm-mic-idle-ink: var(--dm-ink-on-brass); --dm-mic-listening-bg:#9c6e2e; --dm-mic-listening-glow: 0 0 0 12px rgba(196, 146, 74, 0.18); --dm-mic-processing-bg:var(--dm-ink-deep); --dm-mic-error-bg: var(--dm-danger); --dm-mic-muted-bg: var(--dm-line-2); /* Shadows — warm, low-spread, never blue */ --dm-shadow-soft: 0 1px 2px rgba(60, 45, 25, 0.06); --dm-shadow-card: 0 2px 8px rgba(60, 45, 25, 0.08); --dm-shadow-raised: 0 8px 24px rgba(60, 45, 25, 0.10); --dm-shadow-mic: 0 6px 20px rgba(196, 146, 74, 0.34); --dm-shadow-modal: 0 24px 60px rgba(20, 17, 12, 0.28); /* Focus ring (accessibility) */ --dm-focus-ring: 0 0 0 3px rgba(90, 109, 166, 0.45); } /* ───────────────────────────────────────────────────────────────── 3 · DARK MODE ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Surfaces */ --dm-canvas: #14110d; /* warm coffee black */ --dm-surface: #1c1814; --dm-surface-raised: #221d18; --dm-surface-sunken: #100e0a; --dm-overlay: rgba(0, 0, 0, 0.6); /* Text */ --dm-ink: #ece5d6; /* warm chalk */ --dm-ink-2: #b6ad9c; --dm-ink-3: #7f7768; --dm-ink-on-accent: #14110d; --dm-ink-on-brass: #14110d; /* Lines */ --dm-line: #2a241e; --dm-line-2: #3a322a; /* Brand & action — same hues, slightly brighter for dark */ --dm-brass: #d4a55e; --dm-brass-hover: #e0b370; --dm-brass-press: #c4924a; --dm-brass-tint: rgba(212, 165, 94, 0.12); --dm-ink-deep: #c4cbe6; /* on dark, becomes a soft sky-ink */ --dm-ink-deep-hover:#d4dbf0; --dm-ink-deep-tint: rgba(196, 203, 230, 0.08); /* Semantic state */ --dm-ok: #94b074; --dm-ok-tint:rgba(148, 176, 116, 0.12); --dm-warn: #d4a55e; --dm-warn-tint:rgba(212, 165, 94, 0.12); --dm-danger: #d96a57; --dm-danger-tint:rgba(217, 106, 87, 0.12); --dm-info: #8a9bd0; --dm-info-tint:rgba(138, 155, 208, 0.12); --dm-muted: #7f7768; --dm-locked: #4a4338; /* CEFR level swatches */ --dm-level-a1: #94b074; --dm-level-a2: #d4a55e; --dm-level-b1: #d49058; --dm-level-b2: #8a9bd0; --dm-level-c1: #e05555; /* warm red, aligned with Grammar C1 */ /* Mastery */ --dm-mastery-0: #3a322a; --dm-mastery-1: rgba(212, 165, 94, 0.28); --dm-mastery-2: rgba(212, 165, 94, 0.52); --dm-mastery-3: rgba(212, 165, 94, 0.78); --dm-mastery-4: var(--dm-brass); /* Mic */ --dm-mic-idle-bg: var(--dm-brass); --dm-mic-idle-ink: var(--dm-ink-on-brass); --dm-mic-listening-bg:#e0b370; --dm-mic-listening-glow: 0 0 0 12px rgba(212, 165, 94, 0.24); --dm-mic-processing-bg:#c4cbe6; --dm-mic-error-bg: var(--dm-danger); --dm-mic-muted-bg: var(--dm-line-2); /* Shadows — bigger, blacker in dark */ --dm-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35); --dm-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.4); --dm-shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.5); --dm-shadow-mic: 0 6px 24px rgba(212, 165, 94, 0.36); --dm-shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.7); --dm-focus-ring: 0 0 0 3px rgba(138, 155, 208, 0.55); } /* ───────────────────────────────────────────────────────────────── 4 · SYSTEM PREFERENCE — honoured unless user has set [data-theme] ───────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { /* Mirror the dark block above. Codex: keep in sync. */ --dm-canvas:#14110d; --dm-surface:#1c1814; --dm-surface-raised:#221d18; --dm-surface-sunken:#100e0a; --dm-overlay: rgba(0,0,0,0.6); --dm-ink:#ece5d6; --dm-ink-2:#b6ad9c; --dm-ink-3:#7f7768; --dm-ink-on-accent:#14110d; --dm-ink-on-brass:#14110d; --dm-line:#2a241e; --dm-line-2:#3a322a; --dm-brass:#d4a55e; --dm-brass-hover:#e0b370; --dm-brass-press:#c4924a; --dm-brass-tint:rgba(212,165,94,0.12); --dm-ink-deep:#c4cbe6; --dm-ok:#94b074; --dm-warn:#d4a55e; --dm-danger:#d96a57; --dm-info:#8a9bd0; --dm-level-a1:#94b074; --dm-level-a2:#d4a55e; --dm-level-b1:#d49058; --dm-level-b2:#8a9bd0; --dm-level-c1:#e05555; --dm-mastery-0:#3a322a; --dm-shadow-soft:0 1px 2px rgba(0,0,0,0.35); --dm-shadow-card:0 2px 10px rgba(0,0,0,0.4); --dm-shadow-raised:0 12px 32px rgba(0,0,0,0.5); --dm-shadow-mic:0 6px 24px rgba(212,165,94,0.36); } } /* ───────────────────────────────────────────────────────────────── 5 · RESET HOOKS (optional — Codex may already have these) ───────────────────────────────────────────────────────────────── */ html { -webkit-text-size-adjust: 100%; font-feature-settings: "ss01", "cv11"; /* Inter humanist features for DE clarity */ } body { background: var(--dm-canvas); color: var(--dm-ink); font: var(--dm-type-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } *:focus-visible { outline: none; box-shadow: var(--dm-focus-ring); border-radius: var(--dm-r-sm); }