/* ========================================================= TOKENS — single source of truth for colour, type, space. Theme is set on . ========================================================= */ :root { /* Brand ------------------------------------------------ */ --gold: #c9a84c; --gold-soft: #e3c87c; --gold-deep: #8e7327; --gold-sheen: linear-gradient(135deg, #f0dda6 0%, #c9a84c 46%, #9c7f33 100%); /* Fixed brand colours (never themed) ------------------- */ --whatsapp: #25d366; --whatsapp-dark: #1eb457; /* Type ------------------------------------------------- */ --font-display: "Playfair Display", "Times New Roman", serif; --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Space Mono", ui-monospace, "SF Mono", monospace; /* Fluid type scale (clamped, viewport-aware) ----------- */ --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem); --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem); --step-1: clamp(1.1rem, 1.02rem + 0.4vw, 1.35rem); --step-2: clamp(1.4rem, 1.2rem + 1vw, 2rem); --step-3: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); --step-4: clamp(2.6rem, 1.6rem + 4.6vw, 4.4rem); --step-5: clamp(3.2rem, 1.6rem + 7vw, 6rem); /* Space (8pt rhythm) ----------------------------------- */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; --space-4xl: 7rem; /* Layout ----------------------------------------------- */ --measure: 62ch; --container: 1200px; --container-wide: 1440px; --gutter: clamp(1.25rem, 4vw, 3.75rem); /* Tightened so anchored sections put their heading near the top of the viewport and more of the section is visible on arrival. */ --section-y: clamp(3rem, 5.5vw, 5rem); --nav-h: 74px; /* Radius ----------------------------------------------- */ --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; /* Motion ----------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur: 260ms; --dur-slow: 620ms; /* Z-index ---------------------------------------------- */ --z-grain: 9; --z-nav: 100; --z-menu: 90; --z-float: 200; --z-lightbox: 500; } /* --------------------------------------------------------- DARK — the default canvas. Warm near-black, gold ink. --------------------------------------------------------- */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0a0907; --bg-alt: #100e0b; --surface: #17140f; --surface-2: #1f1b14; --surface-hover: #262117; --text: #f2ede3; --text-muted: #a9a296; --text-subtle: #6f6a61; --line: rgba(201, 168, 76, 0.14); --line-strong: rgba(201, 168, 76, 0.34); --hairline: rgba(242, 237, 227, 0.07); --accent: var(--gold); --accent-contrast: #0a0907; --accent-wash: rgba(201, 168, 76, 0.08); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.62); --shadow-glow: 0 18px 48px rgba(201, 168, 76, 0.22); --grain-opacity: 0.32; --spotlight: rgba(201, 168, 76, 0.1); /* Chart series. Tuned for the dark chart surface and verified with the data-viz validator (lightness band, chroma floor, CVD separation, normal-vision floor, contrast) — do not hand-tweak without re-running it. */ --chart-1: #b28f36; --chart-2: #35a5b8; } /* --------------------------------------------------------- LIGHT — the same brand, inverted. Ivory paper, bronze ink. Gold is darkened to hold AA contrast on a light canvas. --------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --gold: #8a6e22; --gold-soft: #b4922f; --gold-deep: #6b5417; --gold-sheen: linear-gradient(135deg, #b4922f 0%, #8a6e22 50%, #6b5417 100%); --bg: #fbf8f1; --bg-alt: #f4efe2; --surface: #ffffff; --surface-2: #faf6ec; --surface-hover: #f5efe0; --text: #17150f; --text-muted: #5c564b; --text-subtle: #8a8377; --line: rgba(138, 110, 34, 0.18); --line-strong: rgba(138, 110, 34, 0.4); --hairline: rgba(23, 21, 15, 0.08); --accent: var(--gold); --accent-contrast: #fffdf7; --accent-wash: rgba(138, 110, 34, 0.07); --shadow-sm: 0 2px 8px rgba(74, 60, 22, 0.06); --shadow-md: 0 12px 30px rgba(74, 60, 22, 0.1); --shadow-lg: 0 26px 60px rgba(74, 60, 22, 0.14); --shadow-glow: 0 18px 44px rgba(138, 110, 34, 0.18); --grain-opacity: 0.14; --spotlight: rgba(138, 110, 34, 0.09); /* Re-validated against the light chart surface — not a flip of the dark set. */ --chart-1: #8f6d08; --chart-2: #067d9c; }