/* ========================================================================== Cartage — Design tokens Re-skin a client site from this file alone: palette, type, motion, layout. The 3D material colours live in js/scene.js (PALETTE) — keep them in sync. ========================================================================== */ :root { /* ---- Palette ---------------------------------------------------------- */ --bone: #F2EDE4; /* paper, warm */ --bone-2: #E8E1D5; --bone-3: #D9D0BF; --ink: #12110F; /* near-black, warm */ --ink-2: #1C1A17; --ink-3: #2B2824; --lacquer: #C93B22; /* signature red — the object, the seal, the hover */ --lacquer-2: #E4512F; --lacquer-3: #F4BEAE; /* tint */ /* ---- Semantic (light theme) ------------------------------------------ */ --bg: var(--bone); --bg-2: var(--bone-2); --fg: var(--ink); --fg-2: rgba(18, 17, 15, .62); --fg-3: rgba(18, 17, 15, .38); --line: rgba(18, 17, 15, .12); --line-2: rgba(18, 17, 15, .26); --accent: var(--lacquer); --accent-2: var(--lacquer-2); --on-accent: var(--bone); --card: rgba(255, 255, 255, .38); --card-line: rgba(18, 17, 15, .10); --shadow: 0 40px 80px -40px rgba(18, 17, 15, .28); --glass: rgba(242, 237, 228, .72); /* ---- Type ------------------------------------------------------------- */ --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-sans: "Geist", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --font-mono: "Geist Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; --fs-hero: clamp(3.1rem, 8.2vw, 8.6rem); --fs-h2: clamp(2.3rem, 5vw, 5.2rem); --fs-h3: clamp(1.5rem, 2.4vw, 2.2rem); --fs-lede: clamp(1.05rem, 1.25vw, 1.25rem); --fs-body: 1.0625rem; --fs-small: .9rem; --fs-mono: .72rem; /* ---- Layout ----------------------------------------------------------- */ --gutter: clamp(20px, 4.5vw, 72px); --nav-h: 76px; --max: 1560px; --radius: 24px; --radius-sm: 12px; /* ---- Motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.76, 0, .24, 1); --ease-soft: cubic-bezier(.25, .1, .25, 1); --t-fast: .35s; --t-med: .7s; --t-theme: .9s; } /* Dark theme — toggled on by scroll position (network + process) */ html.is-dark { --bg: var(--ink); --bg-2: var(--ink-2); --fg: var(--bone); --fg-2: rgba(242, 237, 228, .62); --fg-3: rgba(242, 237, 228, .38); --line: rgba(242, 237, 228, .12); --line-2: rgba(242, 237, 228, .28); --accent: var(--lacquer-2); --accent-2: #FF6A47; --on-accent: var(--bone); --card: rgba(255, 255, 255, .04); --card-line: rgba(242, 237, 228, .12); --shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); --glass: rgba(18, 17, 15, .72); }