/* ========================================================================== VEXONA — Design tokens & themes -------------------------------------------------------------------------- Every colour, size, shadow and duration used by the site is a token here. Components must reference tokens — never raw values. Theme resolution: 1. theme-init.js sets before first paint (saved choice → else OS preference). 2. Without JavaScript, the prefers-color-scheme block below applies. ========================================================================== */ /* ---- Fonts (self-hosted, latin subset) --------------------------------- */ @font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); 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; } /* ---- Theme-independent tokens ------------------------------------------ */ :root { /* Typography */ --font-sans: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); --fs-3xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem); --fs-4xl: clamp(2rem, 1.4rem + 2.8vw, 3.25rem); --fs-display: clamp(2.5rem, 1.5rem + 4.6vw, 4.5rem); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --lh-tight: 1.08; --lh-snug: 1.25; --lh-normal: 1.6; --tracking-tight: -0.028em; --tracking-wide: 0.08em; /* Spacing (4px base) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --section-y: clamp(3.5rem, 2.5rem + 5vw, 6.5rem); /* Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; /* Layout */ /* Page width: 1200px on a laptop, then it GROWS with the screen (leaving ~48px each side) up to 2200px, so the page fits a big monitor instead of floating in the middle of it. Text, buttons and spacing keep their normal size. */ --container: clamp(1200px, 100vw - 6rem, 2200px); --container-narrow: 780px; --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); --header-h: 68px; /* Motion */ --dur-fast: 120ms; --dur: 200ms; --dur-slow: 340ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* Stacking */ --z-sticky: 50; --z-header: 60; --z-float: 70; --z-overlay: 90; --z-modal: 100; --z-toast: 110; } /* ========================================================================== LIGHT THEME (default) ========================================================================== */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #fcfcfb; --bg-subtle: #f5f5f3; --surface: #ffffff; --surface-2: #f6f6f4; --surface-inverse: #14201b; --border: #e6e5e1; --border-strong: #d2d0ca; --text: #16181a; --text-muted: #4f5559; --text-subtle: #666d72; /* ≥ 4.8:1 on every light surface (was #6c7378 = 4.41:1 on bg-subtle) */ --text-inverse: #f4f7f5; --accent: #047857; --accent-hover: #065f46; --accent-active: #064e3b; --on-accent: #ffffff; --accent-text: #047857; --accent-soft: #ecfdf5; --accent-soft-border: #b7ebd3; --focus: #047857; --success: #15803d; --success-soft: #f0fdf4; --success-border: #bbe5c8; --warning: #a45a07; --warning-soft: #fffbeb; --warning-border: #f1d9a0; --danger: #b91c1c; --danger-soft: #fef2f2; --danger-border: #f3c1c1; --info: #1d4ed8; --info-soft: #eff6ff; --info-border: #bcd0f7; --shadow-xs: 0 1px 2px rgba(20, 24, 22, 0.05); --shadow-sm: 0 1px 3px rgba(20, 24, 22, 0.08), 0 1px 2px rgba(20, 24, 22, 0.04); --shadow-md: 0 8px 20px -6px rgba(20, 24, 22, 0.12), 0 2px 6px -2px rgba(20, 24, 22, 0.06); --shadow-lg: 0 24px 48px -16px rgba(20, 24, 22, 0.2), 0 4px 12px -4px rgba(20, 24, 22, 0.06); --overlay: rgba(16, 20, 18, 0.5); --header-bg: rgba(252, 252, 251, 0.88); --hero-glow: radial-gradient(60% 55% at 78% 8%, rgba(4, 120, 87, 0.09), transparent 70%); --grid-line: rgba(20, 24, 22, 0.045); --skeleton-a: #eeeeeb; --skeleton-b: #f7f7f5; } /* ========================================================================== DARK THEME Applied when the user chose dark, or (no saved choice, no JS) when the OS prefers dark. Keep both blocks identical. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0c0f0e; --bg-subtle: #101413; --surface: #151a18; --surface-2: #1b211f; --surface-inverse: #ecf0ee; --border: #262d2a; --border-strong: #38423e; --text: #ecf0ee; --text-muted: #a5afab; --text-subtle: #8a9591; --text-inverse: #0c0f0e; --accent: #10b981; --accent-hover: #34d399; --accent-active: #6ee7b7; --on-accent: #04130d; --accent-text: #34d399; --accent-soft: rgba(16, 185, 129, 0.12); --accent-soft-border: rgba(52, 211, 153, 0.3); --focus: #34d399; --success: #4ade80; --success-soft: rgba(74, 222, 128, 0.12); --success-border: rgba(74, 222, 128, 0.3); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.12); --warning-border: rgba(251, 191, 36, 0.3); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.12); --danger-border: rgba(248, 113, 113, 0.32); --info: #7cb0ff; --info-soft: rgba(96, 165, 250, 0.12); --info-border: rgba(96, 165, 250, 0.3); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 10px 24px -8px rgba(0, 0, 0, 0.65), 0 2px 6px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 28px 56px -16px rgba(0, 0, 0, 0.75), 0 4px 12px -4px rgba(0, 0, 0, 0.4); --overlay: rgba(0, 0, 0, 0.62); --header-bg: rgba(12, 15, 14, 0.86); --hero-glow: radial-gradient(60% 55% at 78% 8%, rgba(16, 185, 129, 0.11), transparent 70%); --grid-line: rgba(255, 255, 255, 0.04); --skeleton-a: #1a201e; --skeleton-b: #222a27; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0c0f0e; --bg-subtle: #101413; --surface: #151a18; --surface-2: #1b211f; --surface-inverse: #ecf0ee; --border: #262d2a; --border-strong: #38423e; --text: #ecf0ee; --text-muted: #a5afab; --text-subtle: #8a9591; --text-inverse: #0c0f0e; --accent: #10b981; --accent-hover: #34d399; --accent-active: #6ee7b7; --on-accent: #04130d; --accent-text: #34d399; --accent-soft: rgba(16, 185, 129, 0.12); --accent-soft-border: rgba(52, 211, 153, 0.3); --focus: #34d399; --success: #4ade80; --success-soft: rgba(74, 222, 128, 0.12); --success-border: rgba(74, 222, 128, 0.3); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.12); --warning-border: rgba(251, 191, 36, 0.3); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.12); --danger-border: rgba(248, 113, 113, 0.32); --info: #7cb0ff; --info-soft: rgba(96, 165, 250, 0.12); --info-border: rgba(96, 165, 250, 0.3); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 10px 24px -8px rgba(0, 0, 0, 0.65), 0 2px 6px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 28px 56px -16px rgba(0, 0, 0, 0.75), 0 4px 12px -4px rgba(0, 0, 0, 0.4); --overlay: rgba(0, 0, 0, 0.62); --header-bg: rgba(12, 15, 14, 0.86); --hero-glow: radial-gradient(60% 55% at 78% 8%, rgba(16, 185, 129, 0.11), transparent 70%); --grid-line: rgba(255, 255, 255, 0.04); --skeleton-a: #1a201e; --skeleton-b: #222a27; } }