/* ============================================================ Nexion Corporation — Design Tokens Dark theme is the default (:root). Light overrides via [data-theme="light"] on . ============================================================ */ :root { color-scheme: dark; /* ---- Color: surfaces ---- */ --bg: #0a0d14; --bg-2: #0e1220; --surface: #171b26; --surface-2: #1e2433; /* ---- Color: text ---- */ --text: #fcfcfc; --text-muted: #9aa0b0; /* ---- Color: brand accents ---- */ --accent: #4a5cf0; --accent-bright: #7b8aff; --accent-2: #8b5cf6; --accent-3: #22d3ee; --accent-soft: rgba(74, 92, 240, 0.14); /* ---- Glows / borders / glass ---- */ --glow: rgba(74, 92, 240, 0.35); --glow-2: rgba(139, 92, 246, 0.28); --glow-3: rgba(34, 211, 238, 0.18); --border: rgba(252, 252, 252, 0.08); --border-strong: rgba(252, 252, 252, 0.16); --glass: rgba(23, 27, 38, 0.55); --grid-line: rgba(252, 252, 252, 0.035); /* ---- Gradients ---- */ --grad-brand: linear-gradient(135deg, #4a5cf0, #8b5cf6 55%, #22d3ee); --grad-border: linear-gradient(135deg, rgba(74, 92, 240, 0.6), rgba(139, 92, 246, 0.25), rgba(34, 211, 238, 0.35)); /* ---- Logo ---- */ --logo-ink: var(--text); --logo-accent: #4a5cf0; /* ---- Shadows ---- */ --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35); --shadow-glow: 0 0 40px var(--glow); /* ---- Typography ---- */ --font-sans: "Poppins", "Kanit", ui-sans-serif, system-ui, -apple-system, sans-serif; --fs-hero: clamp(2.6rem, 6.5vw, 4.8rem); --fs-h1: clamp(2.2rem, 4.5vw, 3.4rem); --fs-h2: clamp(1.6rem, 3vw, 2.4rem); --fs-h3: 1.25rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-tiny: 0.75rem; /* ---- Spacing / layout ---- */ --section-pad: clamp(4rem, 10vw, 8rem); --container-w: 1180px; --header-h: 76px; /* ---- Radius (echoes the logo's rx=9 bars) ---- */ --r-sm: 9px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.35s; } [data-theme="light"] { color-scheme: light; --bg: #fcfcfc; --bg-2: #f3f4f8; --surface: #ffffff; --surface-2: #eef0f7; --text: #171b26; --text-muted: #6b7080; --accent-bright: #3a4bd8; --accent-soft: rgba(74, 92, 240, 0.1); --glow: rgba(74, 92, 240, 0.18); --glow-2: rgba(139, 92, 246, 0.14); --glow-3: rgba(34, 211, 238, 0.1); --border: rgba(23, 27, 38, 0.08); --border-strong: rgba(23, 27, 38, 0.16); --glass: rgba(255, 255, 255, 0.6); --grid-line: rgba(23, 27, 38, 0.045); --grad-border: linear-gradient(135deg, rgba(74, 92, 240, 0.45), rgba(139, 92, 246, 0.2), rgba(34, 211, 238, 0.3)); --shadow-card: 0 8px 32px rgba(23, 27, 38, 0.1); --shadow-glow: 0 0 40px var(--glow); } /* Hide body until i18n applies non-default language (pre-paint script adds .i18n-pending; i18n.js removes it; 400ms failsafe in the same inline script guarantees the page can never stay blank). */ html.i18n-pending body { visibility: hidden; }