/* ═══════════════════════════════════════════════════════════════════ SALT — the Coastal Preferred Escapes design system · tokens v1.0 ─────────────────────────────────────────────────────────────────── Built on the house colour engine (Second Brain / engine.css, Kevin Geary HSL method). Block 1 holds the ONLY raw colour inputs, taken from the real CPE logo (navy + sea teal) and the real Amanzimtoti beach in Cabana Mio's own drone footage (sand, sun). Components reference the semantic aliases in block 5 and the tokens in blocks 6-10. Never a hex, rgb or hsl literal anywhere else. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── 1. MASTER INPUTS ← the only raw colour values in the project ── */ /* Sea teal — sampled from the logo wave and "PREFERRED ESCAPES" */ --brand-h: 195; --brand-s: 40%; /* Ink navy — sampled from the logo word "COASTAL". Headings only. */ --ink-h: 218; --ink-s: 69%; /* Sand — the beach in the drone footage. Warm surfaces + details. */ --sand-h: 32; --sand-s: 42%; /* Sun-coral — the ONE confident highlight. Badges, ratings, the founding-member flag, link underlines. Never a large surface. */ --accent-h: 12; --accent-s: 74%; --accent-l: 60%; /* ── 2. SHADE SCALE (lightness, light → dark) ─────────────────────── */ --l-50: 97%; --l-100: 92%; --l-200: 82%; --l-300: 68%; --l-400: 48%; --l-500: 30%; /* ★ = the logo teal exactly (hsl 195 40% 30%) */ --l-600: 24%; --l-700: 18%; --l-800: 12%; --l-900: 7%; /* ── 3. COMPUTED SCALES ──────────────────────────────────────────── */ --brand-50: hsl(var(--brand-h), var(--brand-s), var(--l-50)); --brand-100: hsl(var(--brand-h), var(--brand-s), var(--l-100)); --brand-200: hsl(var(--brand-h), var(--brand-s), var(--l-200)); --brand-300: hsl(var(--brand-h), var(--brand-s), var(--l-300)); --brand-400: hsl(var(--brand-h), var(--brand-s), var(--l-400)); --brand-500: hsl(var(--brand-h), var(--brand-s), var(--l-500)); --brand-600: hsl(var(--brand-h), var(--brand-s), var(--l-600)); --brand-700: hsl(var(--brand-h), var(--brand-s), var(--l-700)); --brand-800: hsl(var(--brand-h), var(--brand-s), var(--l-800)); --brand-900: hsl(var(--brand-h), var(--brand-s), var(--l-900)); --ink-500: hsl(var(--ink-h), calc(var(--ink-s) * 0.55), 34%); --ink-700: hsl(var(--ink-h), var(--ink-s), 16%); /* logo navy */ --ink-900: hsl(var(--ink-h), var(--ink-s), 10%); --sand-50: hsl(var(--sand-h), var(--sand-s), 97%); --sand-100: hsl(var(--sand-h), var(--sand-s), 93%); --sand-200: hsl(var(--sand-h), var(--sand-s), 86%); --sand-400: hsl(var(--sand-h), var(--sand-s), 66%); --sand-600: hsl(var(--sand-h), calc(var(--sand-s) * 0.8), 40%); --accent-light: hsl(var(--accent-h), var(--accent-s), 94%); --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); --accent-dark: hsl(var(--accent-h), var(--accent-s), 44%); /* ── 4. SKY — the hero gradient (teal hue, lifted toward the sky) ── */ --sky-top: hsl(calc(var(--brand-h) + 10), 60%, 90%); --sky-bottom: hsl(var(--brand-h), 30%, 99%); /* ── 5. SEMANTIC ALIASES ← components use ONLY these ─────────────── */ --color-primary: var(--brand-500); /* buttons, links */ --color-primary-dark: var(--brand-600); /* hover */ --color-primary-deep: var(--brand-800); /* pressed, dark sections */ --color-primary-mid: var(--brand-400); --color-primary-light: var(--brand-200); --color-primary-wash: var(--brand-50); /* "sea mist" sections */ --color-secondary: var(--accent); --color-secondary-dark: var(--accent-dark); --color-secondary-wash: var(--accent-light); --color-heading: var(--ink-700); /* logo navy */ --color-dark: var(--ink-900); /* Surfaces: "salt" white (never pure #FFF), mist (sea), sand (beach) */ --color-background: hsl(var(--brand-h), 30%, 99.2%); --color-surface: hsl(var(--brand-h), 100%, 100%); /* cards */ --color-surface-mist: var(--brand-50); --color-surface-sand: var(--sand-50); --color-surface-raised: hsl(var(--brand-h), 20%, 95%); --color-border: hsl(var(--brand-h), 22%, 89%); --color-border-soft: hsl(var(--brand-h), 22%, 93%); /* Copy: slate-teal, never black */ --color-copy: hsl(var(--ink-h), 14%, 30%); --color-copy-muted: hsl(var(--ink-h), 10%, 47%); --color-copy-faint: hsl(var(--ink-h), 8%, 62%); /* Detail colours */ --color-sand: var(--sand-400); --color-sand-deep: var(--sand-600); --color-rating: var(--sand-400); /* On dark (footer, video overlays) */ --color-on-dark: hsl(var(--brand-h), 40%, 99%); --color-on-dark-muted: var(--brand-200); --color-on-dark-faint: var(--brand-300); --color-on-dark-border: hsl(var(--brand-h) 30% 99% / 0.18); /* Status — fixed by convention, not brand (documented exception) */ --color-success: hsl(152, 45%, 36%); --color-error: hsl(4, 65%, 46%); /* ── 6. TYPOGRAPHY ───────────────────────────────────────────────── */ /* Display: Fraunces at LIGHT weight. Soft, optical-size serif — reads like a resort brochure, never like a newspaper headline. Body: Figtree — clean, friendly, very legible on phones. Script: the signature eyebrow only (documented 3rd family, see README). Max one per section, never inside running text. */ --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-script: 'Caveat', 'Segoe Script', cursive; --weight-display: 300; /* the whole point: light, airy headings */ --weight-display-strong: 400; --weight-body: 400; --weight-medium: 500; --weight-bold: 600; /* "bold" in body copy — never 800/900 */ /* Fluid scale, minor-third rhythm, generous at the top */ --text-2xs: clamp(0.7rem, 0.68rem + 0.1vw, 0.75rem); --text-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.84rem); --text-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.94rem); --text-base: clamp(1rem, 0.97rem + 0.18vw, 1.08rem); --text-lg: clamp(1.14rem, 1.08rem + 0.3vw, 1.3rem); --text-xl: clamp(1.35rem, 1.22rem + 0.6vw, 1.7rem); --text-2xl: clamp(1.7rem, 1.45rem + 1.1vw, 2.35rem); --text-3xl: clamp(2.1rem, 1.7rem + 1.9vw, 3.2rem); --text-4xl: clamp(2.6rem, 1.9rem + 3.2vw, 4.6rem); --text-hero: clamp(3rem, 1.9rem + 5vw, 6.4rem); --text-script: clamp(1.45rem, 1.3rem + 0.6vw, 1.85rem); --leading-tight: 1.08; --leading-snug: 1.25; --leading-body: 1.72; --tracking-display: -0.015em; --tracking-caps: 0.16em; --measure: 62ch; /* max line length for body copy */ /* ── 7. SPACING — one scale, generous by design (white space IS the luxury). Never invent a one-off value. ─────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --section-y: clamp(5rem, 10vw, 10rem); /* airy vertical rhythm */ --section-y-sm: clamp(3rem, 6vw, 5.5rem); --shell: min(100% - 2.5rem, 1240px); --shell-narrow: min(100% - 2.5rem, 760px); --gutter: clamp(1.25rem, 3vw, 2.5rem); /* ── 8. RADIUS — soft, like sea glass. Chosen once for the brand. ─── */ --radius: 18px; /* cards, images, panels */ --radius-sm: 10px; /* inputs, small media */ --radius-pill: 999px; /* buttons, chips — the only round shape */ --radius-arch: 999px 999px var(--radius) var(--radius); /* cabana arch */ /* ── 9. SHADOW — tinted with the sea, never grey. Layered so they read as light, not as a drop. (rgba-free: derived from hue) */ --shadow-color: var(--brand-h) 45% 22%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.06); --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.05), 0 4px 12px -4px hsl(var(--shadow-color) / 0.10); --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 0.04), 0 14px 32px -12px hsl(var(--shadow-color) / 0.18); --shadow-lg: 0 4px 8px hsl(var(--shadow-color) / 0.04), 0 32px 64px -24px hsl(var(--shadow-color) / 0.28); --shadow-xl: 0 6px 12px hsl(var(--shadow-color) / 0.05), 0 48px 96px -32px hsl(var(--shadow-color) / 0.34); --shadow-glow: 0 0 0 6px hsl(var(--brand-h) 50% 60% / 0.14); /* focus halo */ --shadow-button: 0 1px 1px hsl(var(--shadow-color) / 0.10), 0 8px 20px -10px hsl(var(--shadow-color) / 0.45); /* ── 10. MOTION — "the tide": unhurried, never bouncy ────────────── */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-tide: cubic-bezier(0.33, 0, 0.13, 1); /* image zooms, reveals */ --dur-fast: 140ms; /* button press / hover colour */ --dur-base: 320ms; /* card lift, underline */ --dur-slow: 900ms; /* reveal on scroll */ --dur-drift: 1600ms; /* image zoom on hover — slow like a swell */ }