/* tokens.css — Triple Gold Rum design tokens (single source of truth). * Mirrors DESIGN.md §2–4. No hardcoded hex anywhere else in the theme. * Component/section CSS references var(--…) only. */ :root { /* ---- Colour system — client core palette (dark + gold) ---- */ --color-rich-black: #030303; /* Main background */ --color-charcoal: #1E1912; /* Secondary dark background, footer plinth */ --color-panel: #2E2B27; /* Dark Graphite — cards, panels, form fields */ --color-antique: #CD9428; /* Antique Gold — CTAs, rules, hairline borders */ --color-metallic: #F5CB4C; /* Metallic Gold — hover, focus ring, highlights */ --color-old-gold: #8D6929; /* Old Gold — heritage/muted accents, active press */ --color-rum-brown: #7C280A; /* Deep Rum Brown — Dark Rum product accent */ --color-jamaica-gold: #EDA31E; /* Amber gold — About hero italic accent, matches brand artwork */ --color-off-white: #FDFDFD; /* Primary text / headings */ --color-warm-grey: #D9D8D6; /* Secondary text */ --color-silver: #8C8A87; /* Supporting grey — captions, legal, placeholder */ --color-white: #FFFFFF; --color-error: #E4534A; /* Validation red — lifted for AA on dark */ /* Semantic aliases (component CSS references these; old names kept mapping) */ --color-primary: var(--color-rich-black); --color-secondary: var(--color-charcoal); --color-accent: var(--color-antique); --color-accent-light: var(--color-metallic); --color-neutral-900: var(--color-rich-black); /* deep text on gold buttons */ --color-neutral-700: var(--color-silver); --color-neutral-300: var(--color-warm-grey); --color-neutral-100: var(--color-off-white); --color-placeholder: var(--color-silver); /* Overlays / tints */ --overlay-hero: rgba(3, 3, 3, 0.62); --overlay-image: rgba(3, 3, 3, 0.68); --header-bg: rgba(3, 3, 3, 0.90); --gold-tint-12: rgba(205, 148, 40, 0.12); --gold-line-25: rgba(205, 148, 40, 0.24); --gold-focus-25: rgba(245, 203, 76, 0.28); /* Atmospheric film-grain (fractal noise) — layered low-opacity so no surface is dead flat. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* Continuous page atmosphere — ONE viewport-fixed warm key applied to so the whole * page reads as lit from above with a single unbroken gradient. Because it is fixed and lives * on the body (not per-section), it never re-seeds at a section boundary → no seam / line. */ --glow-page: radial-gradient(120% 65% at 50% -8%, rgba(245, 203, 76, 0.05), transparent 60%); /* Ambient relief glows — a large soft pool of warm light over the shared black that * fades to nothing well before the section edge, so relief sections read as a lit area * with NO seam or line (see reference). Used instead of solid panel/mahogany blocks. */ --glow-panel: radial-gradient(90% 80% at 50% 46%, rgba(72, 54, 30, 0.85), rgba(38, 27, 14, 0.40) 44%, rgba(3, 3, 3, 0) 75%); --glow-amber: radial-gradient(94% 82% at 50% 44%, rgba(92, 62, 26, 0.88), rgba(46, 30, 12, 0.40) 46%, rgba(3, 3, 3, 0) 77%); /* ---- Typography (DESIGN.md §3) ---- */ --font-display: "Playfair Display", Georgia, serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Modular type scale — strict geometric progression, ratio 1.2 (minor third), * anchored at --text-body = 1rem. Each token = 1rem × 1.2^n. Large steps use * fluid clamp() between two exact scale values so nothing is arbitrary. */ --ratio: 1.2; --text-legal: 0.694rem; /* 1.2^-2 ≈ 11.1 */ --text-overline: 0.694rem; /* 1.2^-2 */ --text-body-sm: 0.833rem; /* 1.2^-1 ≈ 13.3 */ --text-ui: 0.833rem; /* 1.2^-1 */ --text-body: 1rem; /* 1.2^0 = 16 */ --text-body-lg: 1.2rem; /* 1.2^1 ≈ 19.2 */ --text-h4: 1.44rem; /* 1.2^2 ≈ 23 */ --text-h3: clamp(1.44rem, 1.2rem + 1.1vw, 1.728rem); /* 1.2^2 → 1.2^3 (~28) */ --text-h2: clamp(1.728rem, 1.2rem + 2.4vw, 2.488rem); /* 1.2^3 → 1.2^5 (~40) */ --text-h1: clamp(2.074rem, 1.3rem + 3.6vw, 3.583rem); /* 1.2^4 → 1.2^7 (~57) */ --text-display: clamp(2.986rem, 1.2rem + 8vw, 5.16rem); /* 1.2^6 → 1.2^9 (~82) */ --lh-display: 1.05; --lh-h1: 1.1; --lh-h2: 1.15; --lh-h3: 1.25; --lh-h4: 1.3; --lh-body-lg: 1.7; --lh-body: 1.65; /* ---- Spacing scale — 8px base (DESIGN.md §4) ---- */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 128px; /* ---- Containers ---- */ --container-max: 1280px; --container-content: 960px; --container-narrow: 640px; --gutter: 32px; /* ---- Radius / motion ---- */ --radius: 2px; /* nearly-square luxury understatement */ --ease: ease; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for UI enter */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS drawer curve */ --dur-fast: 140ms; --dur: 180ms; --dur-card: 220ms; --dur-slow: 400ms; --header-h: 72px; --header-h-mobile: 64px; } @media (max-width: 767px) { :root { --gutter: 16px; } } @media (min-width: 768px) and (max-width: 1023px) { :root { --gutter: 24px; } }