/* ============================================================ Ventus Base — design tokens (source of truth: HANDOFF.md §1–4) Foundation = "Base" cool-slate neutrals · Flow = "Ventus" teal-cyan (#07a4bd, the ONE accent) · Horizon = deep teal-navy dark fills. Prefer the SEMANTIC ALIASES in code (--accent, --surface-card, …), never raw hex. Light is default; "Base after dark" = [data-theme="dark"]. ============================================================ */ :root { /* ---- Base / foundation neutrals (cool slate) ---- */ --base-0: #ffffff; --base-50: #f5f7f8; --base-100: #eceff2; --base-200: #dce1e6; --base-300: #c1c9d0; --base-400: #97a2ab; --base-500: #6b7680; --base-600: #4d565e; --base-700: #363d45; --base-800: #222930; --base-900: #161b21; --base-950: #0e1317; /* ---- Flow / Ventus accent (teal-cyan) — the ONE accent ---- */ --flow-50: #e7fafd; --flow-100: #c6f2f9; --flow-200: #93e6f1; --flow-300: #57d4e6; --flow-400: #1fbdd6; --flow-500: #07a4bd; /* PRIMARY ACCENT — "the VentusBase colour" */ --flow-600: #04879d; --flow-700: #0a6c7e; --flow-800: #105865; --flow-900: #134955; --flow-950: #082f38; /* ---- Horizon — deep teal-navy (dark hero / CTA fills, glow) ---- */ --horizon-600: #123c4a; --horizon-700: #0d2d39; --horizon-800: #0a2029; --horizon-900: #07161c; /* ---- Status + soft tints ---- */ --success: #1fa971; --success-soft: #e6f6ef; --warning: #e09112; --warning-soft: #fbf1dd; --danger: #e0484d; --danger-soft: #fbe9ea; /* ============================================================ SEMANTIC ALIASES — light theme (default) ============================================================ */ --text-primary: var(--base-900); --text-secondary: var(--base-700); --text-muted: var(--base-500); --text-faint: var(--base-400); --text-inverse: var(--base-0); --text-accent: var(--flow-700); --text-on-accent: #ffffff; --surface-page: var(--base-50); --surface-card: var(--base-0); --surface-sunken: var(--base-100); --surface-inverse: var(--base-950); --surface-accent: var(--flow-500); --surface-accent-soft: var(--flow-50); --border-subtle: var(--base-200); --border-default: var(--base-300); --border-strong: var(--base-400); --border-accent: var(--flow-500); --divider: var(--base-200); --accent: var(--flow-500); --accent-hover: var(--flow-600); --accent-press: var(--flow-700); --accent-contrast: #ffffff; --accent-soft: var(--flow-50); --accent-soft-text: var(--flow-700); --focus-ring: color-mix(in oklch, var(--flow-500) 55%, transparent); /* ---- Type (HANDOFF §2) ---- */ --font-display: "Oxanium", "Noto Sans TC", "Noto Sans SC", system-ui, sans-serif; --font-body: "Hanken Grotesk", "Noto Sans TC", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", "PingFang HK", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --text-2xs: 0.6875rem; /* 11 */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base:1rem; /* 16 */ --text-md: 1.125rem; /* 18 */ --text-lg: 1.25rem; /* 20 */ --text-xl: 1.5rem; /* 24 */ --text-2xl: 1.875rem; /* 30 */ --text-3xl: 2.25rem; /* 36 */ --text-4xl: 3rem; /* 48 */ --text-hero: clamp(2.5rem, 6vw, 4.75rem); /* up to 76 */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-tight: 1.12; --leading-snug: 1.28; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.015em; --tracking-tighter: -0.02em; --tracking-wider: 0.12em; /* ---- Spacing / radius / layout (HANDOFF §3) — 4px grid ---- */ --space-section: clamp(4rem, 8vw, 7.5rem); --space-gap: 1.5rem; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; /* controls */ --radius-lg: 14px; /* cards */ --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; --control-sm: 32px; --control-md: 40px; --control-lg: 48px; --max-width: 1160px; --gutter: 32px; /* ---- Elevation (cool-tinted on #0e1317) ---- */ --shadow-xs: 0 1px 2px rgba(14, 19, 23, 0.06); --shadow-sm: 0 1px 2px rgba(14, 19, 23, 0.06), 0 2px 6px rgba(14, 19, 23, 0.06); --shadow-md: 0 2px 4px rgba(14, 19, 23, 0.06), 0 8px 20px rgba(14, 19, 23, 0.08); --shadow-lg: 0 4px 8px rgba(14, 19, 23, 0.07), 0 18px 40px rgba(14, 19, 23, 0.12); --shadow-xl: 0 8px 16px rgba(14, 19, 23, 0.08), 0 32px 64px rgba(14, 19, 23, 0.16); --shadow-inset: inset 0 1px 2px rgba(14, 19, 23, 0.08); --glow-flow: 0 0 0 1px rgba(7, 164, 189, 0.25), 0 6px 24px rgba(7, 164, 189, 0.28); /* ---- Motion (HANDOFF §4) — smooth, no bounce ---- */ --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-flow: cubic-bezier(0.33, 0.85, 0.30, 1); --ease-emphasis: cubic-bezier(0.16, 1, 0.30, 1); } /* ============================================================ "Base after dark" — available via . This marketing site ships LIGHT; dark hero/CTA bands use Horizon fills directly (see components.css), not this theme. ============================================================ */ [data-theme="dark"] { --text-primary: var(--base-50); --text-secondary: var(--base-300); --text-muted: var(--base-400); --text-faint: var(--base-500); --text-inverse: var(--base-950); --text-accent: var(--flow-300); --text-on-accent: #042027; --surface-page: var(--base-950); --surface-card: var(--base-900); --surface-sunken: #0a0f13; --surface-inverse: var(--base-0); --surface-accent: var(--flow-500); --surface-accent-soft: color-mix(in oklch, var(--flow-500) 16%, var(--base-950)); --border-subtle: color-mix(in oklch, var(--base-0) 8%, transparent); --border-default: color-mix(in oklch, var(--base-0) 14%, transparent); --border-strong: color-mix(in oklch, var(--base-0) 24%, transparent); --border-accent: var(--flow-400); --divider: color-mix(in oklch, var(--base-0) 10%, transparent); --accent: var(--flow-400); --accent-hover: var(--flow-300); --accent-press: var(--flow-200); --accent-contrast: #04222a; --accent-soft: color-mix(in oklch, var(--flow-500) 18%, var(--base-950)); --accent-soft-text: var(--flow-200); }