/* ========================================================================== TalentNetwork.vn - Design Tokens Brand criterion: TRUST (Tin cậy) -------------------------------------------------------------------------- One accent lock: --trust (emerald) is the ONLY accent on the product. It is reserved for verification / safety semantics. --brand (navy) carries authority, navigation and actions. Shape lock: controls 8px, containers 12px, media 10px, chips pill. Theme: follows prefers-color-scheme, overridable via . These custom properties map 1:1 to a Tailwind v4 `@theme` block if the team migrates to a build step later. ========================================================================== */ :root { /* ---- Typography ------------------------------------------------------ */ --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-display: clamp(2rem, 1.5rem + 1.6vw, 2.875rem); --fs-h1: clamp(1.75rem, 1.42rem + 1.4vw, 2.5rem); --fs-h2: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); --fs-h3: 1.1875rem; --fs-lg: 1.0625rem; --fs-base: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.8125rem; --lh-tight: 1.14; --lh-snug: 1.32; --lh-normal: 1.6; --lh-loose: 1.75; --tracking-display: -0.021em; /* ---- Space (4pt base) ------------------------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --section-y: clamp(3rem, 2rem + 4vw, 5.5rem); --container: 1200px; --container-narrow: 760px; /* ---- Shape ----------------------------------------------------------- */ --r-control: 8px; --r-container: 12px; --r-media: 10px; --r-chip: 999px; /* ---- Motion ---------------------------------------------------------- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur: 180ms; /* ---- Layers ---------------------------------------------------------- */ --z-sticky: 20; --z-header: 40; --z-overlay: 60; /* ---- Colour: light (default) ----------------------------------------- */ --bg: #ffffff; --bg-sub: #f4f7fa; --bg-elev: #ffffff; --bg-inset: #eef3f8; --line: #dce4ec; --line-strong: #c2cfdc; --ink: #0b1f33; --ink-2: #4f6376; --ink-3: #5e7284; --brand: #0e3a63; --brand-hover: #0a2b4a; --brand-ink: #10467a; --brand-tint: #e9f0f7; --on-brand: #ffffff; --trust: #0b7a55; --trust-ink: #0a6a4a; --trust-tint: #e4f3ed; --warn: #9a5b00; --warn-tint: #fdf2e2; --danger: #b42318; --danger-tint: #fdeceb; --focus: #1f6fc4; --shadow-sm: 0 1px 2px rgba(11, 31, 51, 0.07); --shadow-md: 0 2px 4px rgba(11, 31, 51, 0.05), 0 12px 28px -16px rgba(11, 31, 51, 0.28); --shadow-lg: 0 4px 8px rgba(11, 31, 51, 0.06), 0 28px 56px -28px rgba(11, 31, 51, 0.34); --skeleton: linear-gradient(90deg, var(--bg-inset) 0%, #f7fafc 50%, var(--bg-inset) 100%); color-scheme: light; } /* ---- Colour: dark ------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #0a1622; --bg-sub: #0e1e2e; --bg-elev: #11253a; --bg-inset: #16304a; --line: #22394f; --line-strong: #33506c; --ink: #e9eff5; --ink-2: #a3b6c8; --ink-3: #7f95aa; --brand: #2970b2; --brand-hover: #3480c6; --brand-ink: #7fb6e8; --brand-tint: #122d47; --on-brand: #ffffff; --trust: #2f9e77; --trust-ink: #6dd3ab; --trust-tint: #10322a; --warn: #d99b3f; --warn-tint: #33260f; --danger: #f07167; --danger-tint: #3a1a18; --focus: #6fb2f0; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.34), 0 12px 28px -16px rgba(0, 0, 0, 0.7); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.36), 0 28px 56px -28px rgba(0, 0, 0, 0.8); --skeleton: linear-gradient(90deg, var(--bg-inset) 0%, #1c3c5c 50%, var(--bg-inset) 100%); color-scheme: dark; } } :root[data-theme='dark'] { --bg: #0a1622; --bg-sub: #0e1e2e; --bg-elev: #11253a; --bg-inset: #16304a; --line: #22394f; --line-strong: #33506c; --ink: #e9eff5; --ink-2: #a3b6c8; --ink-3: #7f95aa; --brand: #2970b2; --brand-hover: #3480c6; --brand-ink: #7fb6e8; --brand-tint: #122d47; --on-brand: #ffffff; --trust: #2f9e77; --trust-ink: #6dd3ab; --trust-tint: #10322a; --warn: #d99b3f; --warn-tint: #33260f; --danger: #f07167; --danger-tint: #3a1a18; --focus: #6fb2f0; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.34), 0 12px 28px -16px rgba(0, 0, 0, 0.7); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.36), 0 28px 56px -28px rgba(0, 0, 0, 0.8); --skeleton: linear-gradient(90deg, var(--bg-inset) 0%, #1c3c5c 50%, var(--bg-inset) 100%); color-scheme: dark; }