/* ========================================================================== Awnex — design tokens -------------------------------------------------------------------------- Two independent axes: 1. THEME — data-theme="light|dark" on . User-controlled, persisted. 2. SURFACE — data-surface="default|inverse|accent|image" on each section. A section asks for a *role* ("inverse"), never a colour. The theme decides what that role resolves to. This is why the hero reads dark in both themes while the logo wall flips: the hero is `inverse`, the logo wall is `default`. Nothing outside this file should contain a raw hex value. ========================================================================== */ :root { /* ---- Brand ramp (theme-independent raw values) ---------------------- */ --awx-navy-900: #0a1a2b; --awx-navy-800: #0d2438; --awx-navy-700: #123049; --awx-blue-600: #1668ac; --awx-blue-500: #1f7ac4; --awx-gold-500: #f5a81c; --awx-gold-400: #ffbe3d; --awx-cream-100: #fdf8ee; --awx-grey-100: #f1f1f1; --awx-grey-300: #cfd4d9; --awx-grey-500: #8b949d; --awx-white: #ffffff; /* ---- Type ----------------------------------------------------------- */ /* Brand faces, with fallbacks chosen to be close in width so the layout does not visibly reflow when the webfont swaps in. */ --awx-font-display: "DINOT Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif; --awx-font-body: "Myriad Pro", "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --awx-step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem); --awx-step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem); --awx-step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); --awx-step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); --awx-step-3: clamp(2rem, 1.6rem + 2vw, 3.1rem); --awx-step-4: clamp(2.5rem, 1.7rem + 3.6vw, 4.8rem); --awx-eyebrow-tracking: 0.18em; --awx-leading-tight: 1.08; --awx-leading-body: 1.6; /* ---- Layout --------------------------------------------------------- */ --awx-measure: 68ch; --awx-container: 1240px; --awx-gutter: clamp(1.25rem, 4vw, 3.5rem); --awx-space-2xs: 0.5rem; --awx-space-xs: 0.75rem; --awx-space-sm: 1.25rem; --awx-space-md: 2rem; --awx-space-lg: 3.5rem; --awx-space-xl: 5.5rem; --awx-space-2xl: 8rem; --awx-radius: 0px; /* the comps are square-cornered throughout */ --awx-rule: 1px; --awx-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================================== THEME: light (default) ========================================================================== */ :root, [data-theme="light"] { --awx-page-bg: var(--awx-white); /* surface: default */ --awx-default-bg: var(--awx-white); --awx-default-text: var(--awx-navy-900); --awx-default-muted: #4a5762; --awx-default-heading: var(--awx-navy-900); --awx-default-rule: var(--awx-grey-300); /* surface: inverse */ --awx-inverse-bg: var(--awx-navy-900); --awx-inverse-text: rgba(255, 255, 255, 0.86); --awx-inverse-muted: rgba(255, 255, 255, 0.62); --awx-inverse-heading: var(--awx-white); --awx-inverse-rule: rgba(255, 255, 255, 0.18); /* surface: accent (the blue panels) */ --awx-accent-bg: var(--awx-blue-600); --awx-accent-text: rgba(255, 255, 255, 0.9); --awx-accent-heading: var(--awx-white); --awx-accent-rule: rgba(255, 255, 255, 0.28); /* chrome */ --awx-header-bg: var(--awx-blue-600); --awx-header-text: var(--awx-white); --awx-footer-bg: var(--awx-blue-600); --awx-footer-text: rgba(255, 255, 255, 0.88); /* the soft cream arc that sweeps behind light sections */ --awx-sweep: var(--awx-cream-100); } /* ========================================================================== THEME: dark ========================================================================== */ [data-theme="dark"] { --awx-page-bg: var(--awx-navy-900); --awx-default-bg: var(--awx-navy-900); --awx-default-text: rgba(255, 255, 255, 0.84); --awx-default-muted: rgba(255, 255, 255, 0.58); --awx-default-heading: var(--awx-white); --awx-default-rule: rgba(255, 255, 255, 0.16); --awx-inverse-bg: var(--awx-navy-800); --awx-inverse-text: rgba(255, 255, 255, 0.84); --awx-inverse-muted: rgba(255, 255, 255, 0.58); --awx-inverse-heading: var(--awx-white); --awx-inverse-rule: rgba(255, 255, 255, 0.16); --awx-accent-bg: var(--awx-blue-600); --awx-accent-text: rgba(255, 255, 255, 0.9); --awx-accent-heading: var(--awx-white); --awx-accent-rule: rgba(255, 255, 255, 0.28); --awx-header-bg: var(--awx-navy-800); --awx-header-text: var(--awx-white); --awx-footer-bg: var(--awx-navy-800); --awx-footer-text: rgba(255, 255, 255, 0.8); --awx-sweep: rgba(255, 255, 255, 0.03); } /* ========================================================================== Surface resolution -------------------------------------------------------------------------- Each section sets data-surface and inherits a consistent set of locals. Blocks style against --surface-* only, never against --awx-navy-900 etc. ========================================================================== */ [data-surface] { background-color: var(--surface-bg); color: var(--surface-text); } [data-surface="default"] { --surface-bg: var(--awx-default-bg); --surface-text: var(--awx-default-text); --surface-muted: var(--awx-default-muted); --surface-heading: var(--awx-default-heading); --surface-rule: var(--awx-default-rule); --surface-accent: var(--awx-gold-500); --surface-eyebrow: var(--awx-blue-600); } [data-surface="inverse"] { --surface-bg: var(--awx-inverse-bg); --surface-text: var(--awx-inverse-text); --surface-muted: var(--awx-inverse-muted); --surface-heading: var(--awx-inverse-heading); --surface-rule: var(--awx-inverse-rule); --surface-accent: var(--awx-gold-500); --surface-eyebrow: var(--awx-gold-500); } [data-surface="accent"] { --surface-bg: var(--awx-accent-bg); --surface-text: var(--awx-accent-text); --surface-muted: rgba(255, 255, 255, 0.75); --surface-heading: var(--awx-accent-heading); --surface-rule: var(--awx-accent-rule); --surface-accent: var(--awx-gold-500); --surface-eyebrow: var(--awx-gold-500); } /* image-backed sections behave like inverse but let the photo through */ [data-surface="image"] { --surface-bg: var(--awx-navy-900); --surface-text: rgba(255, 255, 255, 0.88); --surface-muted: rgba(255, 255, 255, 0.66); --surface-heading: var(--awx-white); --surface-rule: rgba(255, 255, 255, 0.22); --surface-accent: var(--awx-gold-500); --surface-eyebrow: var(--awx-gold-500); } /* ========================================================================== Motion preference ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --awx-transition: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }