/* ============================================================ variables.css — design tokens (loads FIRST) Brand: Bonaire Fish Things Vibe: bright tropical — turquoise sea, warm sand, coral accent ============================================================ */ :root { /* --- Palette --------------------------------------------- */ --c-deep: #063A46; /* deep sea teal — dark surfaces */ --c-ocean: #0E7C8B; /* ocean teal — secondary */ --c-aqua: #17C3D4; /* turquoise — primary brand */ --c-aqua-soft: #B9EEF3; /* pale aqua — tints */ --c-sand: #FBF4E6; /* warm sand — page background */ --c-sand-deep: #F1E4CA; /* deeper sand — alt sections */ --c-coral: #FF6A45; /* coral — CTA / accent */ --c-coral-dk: #E85431; /* coral hover */ --c-sun: #FFC24B; /* sun yellow — highlights */ --c-white: #FFFFFF; --c-ink: #0B2A31; /* main text */ --c-ink-soft: #3E585F; /* muted text */ --c-line: #E4D9C2; /* hairlines on sand */ /* --- Semantic aliases ------------------------------------ */ --bg: var(--c-sand); --bg-alt: var(--c-sand-deep); --bg-dark: var(--c-deep); --text: var(--c-ink); --text-muted: var(--c-ink-soft); --primary: var(--c-aqua); --accent: var(--c-coral); --accent-hover: var(--c-coral-dk); /* Theme-flipping surfaces/text (overridden under [data-theme="dark"]). --surface = card/panel bg; --heading = strong dark headings; --header-bg = scrolled header + mobile menu panel. */ --surface: var(--c-white); --heading: var(--c-deep); --header-bg: rgba(251, 244, 230, 0.92); color-scheme: light; /* --- Typography ------------------------------------------ */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.9375rem; /* 15px */ --fs-base: 1.0625rem; /* 17px */ --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.75rem; --fs-hero: clamp(2.4rem, 6vw, 4.5rem); --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.65; /* --- Spacing & layout ------------------------------------ */ --container: 1160px; --gutter: clamp(1rem, 4vw, 2rem); --section-y: clamp(3.5rem, 8vw, 6.5rem); --radius-sm: 8px; --radius: 16px; --radius-lg: 24px; --radius-pill: 999px; /* --- Shadows --------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(6, 58, 70, 0.08); --shadow: 0 12px 30px rgba(6, 58, 70, 0.12); --shadow-lg: 0 24px 60px rgba(6, 58, 70, 0.18); /* --- Motion ---------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 0.28s; --dur-slow: 0.6s; /* --- Header height (used for scroll offset) -------------- */ --header-h: 68px; } /* ============================================================ Dark theme — set on by an inline head script (localStorage `bft_theme`, else prefers-color-scheme). Only the theme-flipping tokens are overridden; brand accents (aqua/coral/sun) and "always white/dark" literals stay put. ============================================================ */ :root[data-theme="dark"] { --c-sand: #0B2129; /* page background */ --c-sand-deep: #0F2A33; /* alt sections */ --c-ink: #E8F3F1; /* body text */ --c-ink-soft: #A9C3C8; /* muted text */ --c-line: #274F59; /* hairlines / borders */ --c-ocean: #35B9C9; /* accent teal text — brightened for dark */ --surface: #14313B; /* cards / panels */ --heading: #F3FBFA; /* strong headings */ --header-bg: rgba(9, 26, 32, 0.92); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow: 0 12px 30px rgba(0, 0, 0, 0.5); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6); color-scheme: dark; }