/* ============================================================ AELITHON — DESIGN TOKENS ("Opaline") The single source of truth for color, type, space, radius, shadow. Palette story: a luminous emerald-mint paired with a warm peach-amber, set on a plum-tinted ink. The cool jewel-green + warm peach duotone reads iridescent and premium, while the aubergine-black base (instead of plain black) gives depth and a high-end, unexpected mood. Avoids the blue/violet/cyan cliché. Theming: light/dark are driven by [data-theme] on . The default follows the OS setting (see the inline no-flash script in each page's + js/theme.js). Change a value here and it updates everywhere. ============================================================ */ :root { /* ---- Raw brand hues (theme-tuned versions live in the blocks below) ---- */ --emerald: #2DE2B4; /* luminous mint-emerald — the hero accent */ --peach: #FFB877; /* warm peach-amber — the partner accent */ --coral: #FF7A66; /* coral spark — rare emphasis */ /* ---- Typography ---- */ --font-display: 'Clash Display', 'Satoshi', system-ui, sans-serif; --font-body: 'Satoshi', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif; /* Fluid type scale (min, preferred, max) */ --fs-900: clamp(2.85rem, 6vw + 1rem, 5.75rem); /* hero display */ --fs-800: clamp(2.2rem, 4vw + 1rem, 3.75rem); /* section titles */ --fs-700: clamp(1.7rem, 2.4vw + 1rem, 2.5rem); --fs-600: clamp(1.3rem, 1.4vw + 0.8rem, 1.7rem); --fs-500: 1.25rem; --fs-400: 1.0625rem; /* body */ --fs-300: 0.9375rem; --fs-200: 0.8125rem; /* eyebrow / small */ --lh-tight: 1.04; --lh-snug: 1.25; --lh-body: 1.65; /* ---- Spacing scale ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* ---- Radius ---- */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 34px; --r-pill: 999px; /* ---- Layout ---- */ --maxw: 1200px; --maxw-narrow: 760px; --nav-h: 74px; /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur: 0.5s; --dur-fast: 0.25s; } /* ============================================================ DARK THEME (the brand's primary mood) ============================================================ */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #0A0810; /* plum-tinted ink */ --bg-elev: #120E1C; --bg-elev-2: #1A1428; --bg-glass: rgba(22, 17, 36, 0.55); --text: #F1ECF7; --text-muted: #A8A0BA; --text-faint: #6F6884; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.18); --accent: #2DE2B4; /* luminous emerald-mint, glows on the plum-black */ --accent-2: #FFB877; /* warm peach-amber */ --spark: #FF7A66; /* coral, rare emphasis */ --on-accent: #051512; /* ink that sits on accent fills */ --gradient: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%); --gradient-soft: linear-gradient(120deg, rgba(45,226,180,0.18), rgba(255,184,119,0.14)); --glow: rgba(45, 226, 180, 0.38); --shadow-sm: 0 2px 10px rgba(0,0,0,0.45); --shadow-md: 0 16px 48px rgba(0,0,0,0.52); --shadow-glow: 0 10px 50px -12px var(--glow); } /* ============================================================ LIGHT THEME (accents deepen for contrast on white) ============================================================ */ [data-theme="light"] { color-scheme: light; --bg: #FAF7F3; /* warm cream, not stark white */ --bg-elev: #FFFFFF; --bg-elev-2: #F3EFEA; --bg-glass: rgba(255, 255, 255, 0.74); --text: #18131F; /* deep plum-ink */ --text-muted: #574F63; --text-faint: #837A8E; --border: rgba(24, 19, 31, 0.10); --border-strong: rgba(24, 19, 31, 0.18); --accent: #07A982; /* deeper emerald for legibility on cream */ --accent-2: #C46A18; /* burnt amber */ --spark: #E0533C; --on-accent: #FFFFFF; --gradient: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%); --gradient-soft: linear-gradient(120deg, rgba(7,169,130,0.12), rgba(196,106,24,0.10)); --glow: rgba(7, 169, 130, 0.22); --shadow-sm: 0 2px 10px rgba(24,19,31,0.07); --shadow-md: 0 18px 50px rgba(24,19,31,0.12); --shadow-glow: 0 10px 50px -12px var(--glow); }