/* Broad View — "Alpine After Dark" tokens Cinematic / immersive / liquid-glass register Mood: anticipation → awe → warmth (alpine night → sunrise alpenglow → cabin fire) */ :root { /* —— Surface (deep night sky over snowy peaks) —— */ --bg-deep: #07090f; --bg-base: #0a0e16; --bg-raise: #11172a; --bg-card: #161c30; --bg-glass: rgba(255, 255, 255, 0.04); --bg-glass-2: rgba(255, 255, 255, 0.06); /* —— Ink —— */ --ink: #f3f1e8; --ink-soft: rgba(243, 241, 232, 0.78); --ink-mute: rgba(243, 241, 232, 0.56); --ink-faint: rgba(243, 241, 232, 0.36); /* —— Accents —— */ --alpenglow: #f5b942; /* sunrise gold on the snow — primary CTA */ --alpenglow-deep: #c9931f; --alpenglow-warm: #ff8a4d; /* cabin lantern */ --glacial: #7cd0e0; /* ice blue for info / second accent */ --evergreen: #2f7e5d; /* pine — used very sparingly */ /* Aurora gradient (used as cosmic backdrop on hero) */ --aurora-1: #5d9aff; --aurora-2: #b277ff; --aurora-3: #ff5da8; --aurora-4: #f5b942; /* —— Borders —— */ --rule: rgba(255, 255, 255, 0.10); --rule-strong: rgba(255, 255, 255, 0.18); --rule-glow: color-mix(in srgb, var(--alpenglow) 30%, transparent); /* —— Type —— */ --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif; --font-body: "Inter", "Source Sans 3", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", ui-monospace, monospace; --fs-xs: 0.75rem; --fs-sm: 0.85rem; --fs-body: 1rem; --fs-lede: clamp(1.05rem, 1.25vw, 1.25rem); --fs-h4: clamp(1.2rem, 1.6vw, 1.4rem); --fs-h3: clamp(1.45rem, 2.4vw, 1.95rem); --fs-h2: clamp(2.2rem, 4.2vw, 3.5rem); --fs-h1: clamp(3rem, 7vw, 6.25rem); --fs-display: clamp(5rem, 14vw, 14rem); --tracking-eyebrow: 0.28em; --tracking-display: -0.02em; --tracking-tight: -0.01em; /* —— Spacing rhythm (4/8 grid) —— */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem; --s-10: 9rem; /* —— Layout —— */ --wrap-max: 1280px; --wrap-pad: clamp(1.25rem, 4vw, 3rem); --section-y: clamp(5rem, 12vw, 10rem); /* —— Radii —— */ --r-1: 6px; --r-2: 12px; --r-3: 20px; --r-4: 32px; --r-pill: 999px; /* —— Motion —— */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1); --dur-1: 180ms; --dur-2: 320ms; --dur-3: 520ms; --dur-4: 800ms; --dur-5: 1200ms; /* —— Shadow / glow —— */ --shadow-soft: 0 30px 60px -30px rgba(0, 0, 0, 0.65); --shadow-glass: 0 24px 48px -16px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255,255,255,0.06); --glow-alpenglow: 0 0 0 1px color-mix(in srgb, var(--alpenglow) 30%, transparent), 0 12px 40px -8px color-mix(in srgb, var(--alpenglow) 45%, transparent); --glow-glacial: 0 0 0 1px color-mix(in srgb, var(--glacial) 30%, transparent), 0 12px 40px -8px color-mix(in srgb, var(--glacial) 35%, transparent); /* —— Z-index scale —— */ --z-base: 1; --z-stick: 10; --z-cursor: 60; --z-nav: 70; --z-modal: 80; --z-toast: 90; } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms; } } /* ───────────────────────────────────────────────────────────── ALPINE DAYLIGHT — light theme overrides "Meadow & Mountain" — multi-shade greens + sky blue Activated via [data-theme="light"] on (persisted in localStorage). ───────────────────────────────────────────────────────────── */ [data-theme="light"] { /* Paper surfaces — warm, slightly desaturated */ --bg-deep: #ede2c9; --bg-base: #fbf6ec; --bg-raise: #ffffff; --bg-card: #fffdf6; --bg-glass: rgba(255, 255, 255, 0.55); --bg-glass-2: rgba(255, 255, 255, 0.78); /* Ink — warm near-black, never pure black */ --ink: #22201a; --ink-soft: rgba(34, 32, 26, 0.80); --ink-mute: rgba(34, 32, 26, 0.58); --ink-faint: rgba(34, 32, 26, 0.32); /* Accents — sunrise palette */ --alpenglow: #3d8a5a; /* fresh forest — primary CTA */ --alpenglow-deep: #1f4f33; --alpenglow-warm: #7ab86b; /* meadow leaf */ --glacial: #3d8aaa; /* high-altitude sky blue */ --evergreen: #4a7d5e; /* pine */ /* Aurora gradient → softened watercolour wash for hero */ --aurora-1: #c9e6cf; --aurora-2: #b6dceb; --aurora-3: #d6ecd6; --aurora-4: #3d8a5a; /* Hairlines — darker against light */ --rule: rgba(34, 32, 26, 0.10); --rule-strong: rgba(34, 32, 26, 0.22); --rule-glow: color-mix(in srgb, var(--alpenglow) 30%, transparent); /* Shadows — softer + warm */ --shadow-soft: 0 30px 60px -28px rgba(78, 60, 30, 0.28); --shadow-glass: 0 24px 44px -20px rgba(78, 60, 30, 0.25), inset 0 0 0 1px rgba(255,255,255,0.6); --glow-alpenglow: 0 0 0 1px color-mix(in srgb, var(--alpenglow) 35%, transparent), 0 16px 32px -10px color-mix(in srgb, var(--alpenglow) 35%, transparent); --glow-glacial: 0 0 0 1px color-mix(in srgb, var(--glacial) 30%, transparent), 0 16px 32px -10px color-mix(in srgb, var(--glacial) 30%, transparent); } [data-theme="light"] { color-scheme: light; } /* ───────────────────────────────────────────────────────────── WP global-style preset overrides for light mode theme.json palette presets compile into `:root :where(...)` rules that are UNLAYERED, so they win over our @layer components rules. Re-binding the same CSS variables in [data-theme="light"] makes WP's compiled `color: var(--wp--preset--color--alpenglow)` etc. resolve to light-mode-appropriate values. ───────────────────────────────────────────────────────────── */ [data-theme="light"] { --wp--preset--color--bg-base: #fbf6ec; --wp--preset--color--bg-raise: #ffffff; --wp--preset--color--ink: #22201a; --wp--preset--color--alpenglow: #2a5e3e; /* deep pine green — links */ --wp--preset--color--alpenglow-warm: #4a7d5e; /* sage — secondary */ --wp--preset--color--evergreen: #3d8a5a; /* fresh forest */ --wp--preset--color--glacial: #3d8aaa; /* sky — info */ } /* Dark mode keeps the original palette — but explicitly bind these too, so our overrides above can never accidentally bleed. */ :root:not([data-theme="light"]) { --wp--preset--color--bg-base: #0a0e16; --wp--preset--color--bg-raise: #11172a; --wp--preset--color--ink: #f3f1e8; --wp--preset--color--alpenglow: #f5b942; --wp--preset--color--alpenglow-warm: #ff8a4d; --wp--preset--color--evergreen: #2f7e5d; --wp--preset--color--glacial: #7cd0e0; }