/* ========================================================================== Aurora Glass — design tokens -------------------------------------------------------------------------- Custom properties ONLY. No element or class rules live here, so this file is safe to load before the legacy style.css without any specificity fights. The visual layer that consumes these tokens is aurora.css, which loads last. Dark is the default. Light is opt-in via [data-theme="light"] on , or automatic via prefers-color-scheme when the visitor has made no choice. ========================================================================== */ /* Self-hosted so the critical render path does not wait on DNS + TLS to fonts.googleapis.com and fonts.gstatic.com. Both are variable fonts, so one file per family covers every weight we use. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/themes/hil/fonts/inter-latin.woff2') format('woff2'); 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; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/themes/hil/fonts/spacegrotesk-latin.woff2') format('woff2'); 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; } :root { /* Surfaces */ --hil-bg: #0B0F0E; --hil-bg-elevated: #101614; --hil-surface: rgba(255, 255, 255, 0.06); --hil-surface-hover: rgba(255, 255, 255, 0.10); --hil-surface-solid: #141C1A; --hil-surface-sunken: rgba(0, 0, 0, 0.24); /* Borders */ --hil-border: rgba(255, 255, 255, 0.10); --hil-border-strong: rgba(255, 255, 255, 0.18); /* Accent — the legacy brand green #436043, brightened for contrast on dark */ --hil-accent: #34D399; --hil-accent-hover: #5FE0B0; --hil-accent-soft: rgba(52, 211, 153, 0.14); --hil-accent-line: rgba(52, 211, 153, 0.32); --hil-on-accent: #04241A; /* Text */ --hil-text: #F2F5F3; --hil-text-dim: #9BA8A2; --hil-text-faint: #6B7873; /* Aurora mesh blobs */ --hil-mesh-1: rgba(52, 211, 153, 0.20); --hil-mesh-2: rgba(45, 212, 191, 0.14); --hil-mesh-3: rgba(101, 137, 92, 0.16); /* Geometry */ --hil-radius-card: 20px; --hil-radius-control: 12px; --hil-radius-pill: 999px; --hil-blur: blur(20px); /* Type */ --hil-font-head: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --hil-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* Depth */ --hil-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 32px rgba(0, 0, 0, 0.28); --hil-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.32), 0 20px 44px rgba(0, 0, 0, 0.38); color-scheme: dark; } /* --- Light: automatic, only when the visitor has not explicitly chosen dark --- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --hil-bg: #FBFCFB; --hil-bg-elevated: #FFFFFF; --hil-surface: rgba(255, 255, 255, 0.72); --hil-surface-hover: #FFFFFF; --hil-surface-solid: #FFFFFF; --hil-surface-sunken: rgba(11, 15, 14, 0.04); --hil-border: rgba(11, 15, 14, 0.08); --hil-border-strong: rgba(11, 15, 14, 0.16); --hil-accent: #16794C; --hil-accent-hover: #0F5C39; --hil-accent-soft: rgba(22, 121, 76, 0.10); --hil-accent-line: rgba(22, 121, 76, 0.28); --hil-on-accent: #FFFFFF; --hil-text: #0F1513; --hil-text-dim: #5B6862; --hil-text-faint: #8B9791; --hil-mesh-1: rgba(52, 211, 153, 0.16); --hil-mesh-2: rgba(45, 212, 191, 0.12); --hil-mesh-3: rgba(101, 137, 92, 0.12); --hil-blur: blur(14px); --hil-shadow-card: 0 1px 2px rgba(11, 15, 14, 0.05), 0 8px 24px rgba(11, 15, 14, 0.06); --hil-shadow-lift: 0 2px 4px rgba(11, 15, 14, 0.07), 0 16px 36px rgba(11, 15, 14, 0.10); color-scheme: light; } } /* --- Light: explicit toggle. Wins over the media query in both directions. --- */ :root[data-theme="light"] { --hil-bg: #FBFCFB; --hil-bg-elevated: #FFFFFF; --hil-surface: rgba(255, 255, 255, 0.72); --hil-surface-hover: #FFFFFF; --hil-surface-solid: #FFFFFF; --hil-surface-sunken: rgba(11, 15, 14, 0.04); --hil-border: rgba(11, 15, 14, 0.08); --hil-border-strong: rgba(11, 15, 14, 0.16); --hil-accent: #16794C; --hil-accent-hover: #0F5C39; --hil-accent-soft: rgba(22, 121, 76, 0.10); --hil-accent-line: rgba(22, 121, 76, 0.28); --hil-on-accent: #FFFFFF; --hil-text: #0F1513; --hil-text-dim: #5B6862; --hil-text-faint: #8B9791; --hil-mesh-1: rgba(52, 211, 153, 0.16); --hil-mesh-2: rgba(45, 212, 191, 0.12); --hil-mesh-3: rgba(101, 137, 92, 0.12); --hil-blur: blur(14px); --hil-shadow-card: 0 1px 2px rgba(11, 15, 14, 0.05), 0 8px 24px rgba(11, 15, 14, 0.06); --hil-shadow-lift: 0 2px 4px rgba(11, 15, 14, 0.07), 0 16px 36px rgba(11, 15, 14, 0.10); color-scheme: light; }