/* ====================================================================
Lagafater Design System — All tokens compiled into one file.
Generated: 2026-06-24T15:29:38.647Z
==================================================================== */
/* FONTS */
/* Lagafater — Webfonts
Display serif: Latienne (elegant, sophisticated headline font)
Body / UI sans: Mulish (warm, rounded humanist sans)
NOTE: fonts are loaded from Google Fonts CDN. For fully offline use, self-host the
.woff2 files and replace this @import with local @font-face rules. */
/* Local Latienne font faces */
@font-face {
font-family: "Latienne";
src: url('/fonts/Latienne Pro-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Latienne";
src: url('/fonts/Latienne Pro-Regular-Italic.otf') format('opentype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Latienne";
src: url('/fonts/Latienne Pro-Medium.otf') format('opentype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Latienne";
src: url('/fonts/Latienne Pro-Semibold-Italic.otf') format('opentype');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Latienne";
src: url('/fonts/Latienne Pro-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Latienne";
src: url('/fonts/Latienne Pro-Bold-Italic.otf') format('opentype');
font-weight: 700;
font-style: italic;
font-display: swap;
}
/* Mulish (body/UI sans) is loaded via tags in each page's — NOT via @import
here, because a CSS @import blocks rendering and loads serially (CSS -> import -> font).
The + stylesheet lets the browser fetch it in parallel. */
/* COLORS */
/* Lagafater — Color tokens
A warm, earthy palette: olive-brown ink, brass/ochre, sage, terracotta, cream.
Sophisticated and luxurious while staying grounded and ecological. */
:root {
/* ---- Stone (warm neutral) ---- */
--stone-50: #F8F4EC;
--stone-100: #F0EADD;
--stone-200: #E3DACA;
--stone-300: #CABFA6;
--stone-400: #ABA086;
--stone-500: #8C8268;
--stone-600: #6E6553;
--stone-700: #544E3F;
--stone-800: #3E3A2F; /* primary ink (palette anchor) */
--stone-900: #2C281F;
--cream: #F5F1E8; /* page background (palette anchor) */
/* ---- Brass / Ochre (primary accent) ---- */
--brass-50: #F6EFE2;
--brass-100: #EADCC4;
--brass-200: #DAC59C;
--brass-300: #C7AC78;
--brass-400: #B0925C;
--brass-500: #9C8359; /* anchor */
--brass-600: #836C46;
--brass-700: #685537;
--brass-800: #4E3F29;
/* ---- Sage (secondary / ecological accent) ---- */
--sage-50: #EEF0E6;
--sage-100: #DCE1CC;
--sage-200: #C4CBAC;
--sage-300: #A7B08A; /* anchor */
--sage-400: #8C976B;
--sage-500: #737E54;
--sage-600: #5C6543;
--sage-700: #474E34;
/* ---- Terracotta (tertiary warm accent) ---- */
--terra-200: #E6B79E;
--terra-300: #D08C6E;
--terra-400: #BE7050;
--terra-500: #A8503A; /* anchor */
--terra-600: #8A4030;
/* ---- Muted teal (cool counterpoint, info) ---- */
--teal-400: #6B8A84;
--teal-500: #4F6F6A;
--teal-600: #3C5651;
/* ====================================================================
SEMANTIC ALIASES — prefer these in product code
==================================================================== */
/* Text */
--text-strong: var(--stone-900);
--text-body: var(--stone-800);
--text-muted: var(--stone-600);
--text-subtle: var(--stone-500);
--text-on-dark: var(--cream);
--text-accent: var(--brass-700);
/* Surfaces */
--surface-page: var(--stone-50);
--surface-card: #FCFAF4;
--surface-sunken: var(--stone-100);
--surface-raised: #FFFFFF;
--surface-dark: var(--stone-800);
--surface-inverse: var(--stone-900);
--surface-accent-soft: var(--brass-50);
--surface-sage-soft: var(--sage-50);
/* Borders */
--border-subtle: var(--stone-200);
--border-default: var(--stone-300);
--border-strong: var(--stone-400);
--border-dark: var(--stone-700);
/* Accents */
--accent: var(--brass-500);
--accent-hover: var(--brass-600);
--accent-active: var(--brass-700);
--accent-soft: var(--brass-100);
--accent-contrast: #FFFFFF;
--accent-2: var(--sage-400);
--accent-2-hover: var(--sage-500);
--accent-2-soft: var(--sage-100);
/* Semantic status */
--success: var(--sage-500);
--success-soft: var(--sage-100);
--warning: var(--brass-500);
--warning-soft: var(--brass-100);
--danger: var(--terra-500);
--danger-soft: var(--terra-200);
--info: var(--teal-500);
--info-soft: #DCE6E3;
/* Focus */
--focus-ring: color-mix(in srgb, var(--brass-500) 55%, transparent);
/* Tells the browser to render native controls (scrollbars, inputs, date pickers)
in light mode by default; the dark block below flips this to dark. */
color-scheme: light;
}
/* ====================================================================
DARK MODE — follows the visitor's OS setting automatically.
Only the semantic aliases (and a few base colours used directly in
markup) are remapped, so every component that uses tokens adapts for
free. Kept warm/earthy (dark browns, not pure black) to stay on-brand.
==================================================================== */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
/* A few base palette colours are referenced directly in markup, so
lift them here for legibility on a dark background. */
--terra-500: #D08C6E; /* links: lift from the dark #A8503A anchor */
--cream: #F5F1E8; /* unchanged, but kept explicit for clarity */
/* Text — warm light neutrals */
--text-strong: #F6F2E9;
--text-body: #E3DACA; /* stone-200 */
--text-muted: #B4AA8F;
--text-subtle: #968C73;
--text-on-dark: #F6F2E9;
--text-accent: var(--brass-200);
/* Surfaces — warm dark browns */
--surface-page: #201D16;
--surface-card: #2A271D;
--surface-sunken: #17150F;
--surface-raised: #2E2A20;
--surface-dark: #17150F;
--surface-inverse: #F6F2E9;
--surface-accent-soft: #2F2819;
--surface-sage-soft: #23271B;
/* Borders */
--border-subtle: #38342A;
--border-default: #4A4535;
--border-strong: #5B5543;
--border-dark: #6E6553;
/* Accents — lift the brass so it reads on dark; button text goes dark */
--accent: var(--brass-300);
--accent-hover: var(--brass-200);
--accent-active: var(--brass-100);
--accent-soft: var(--brass-800);
--accent-contrast: #201D16;
/* Status accents lifted for contrast */
--danger: #D08C6E;
--success: var(--sage-300);
--info: var(--teal-400);
/* Shadows read as almost nothing on dark, so deepen them */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.4);
}
/* The Lodgify booking widget is a third-party embed whose internal text
is rendered dark and can't be fully re-themed, so keep its card light
in both modes to guarantee it stays legible. The `body` prefix raises
specificity so this wins over each page's own `.booking-form` rule. */
body .booking-form {
background: #FCFAF4;
border-color: rgba(0, 0, 0, 0.12);
}
}
/* TYPOGRAPHY */
/* Lagafater — Typography tokens */
:root {
/* Families */
--font-serif: "Latienne", Georgia, "Times New Roman", serif;
--font-sans: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
/* Weights */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* Body / UI scale (sans) */
--text-2xs: 0.75rem; /* 12 */
--text-xs: 0.875rem; /* 14 */
--text-sm: 0.875rem; /* 14 */
--text-base: 1rem; /* 16 – body text */
--text-md: 1.125rem; /* 18 – body large */
--text-lg: 1.25rem; /* 20 */
--text-xl: 1.375rem; /* 22 */
/* Display scale (serif) */
--display-lg: 3.5rem; /* 56 – largest heading */
--display-md: 2.25rem; /* 36 – h2 */
--display-sm: 1.75rem; /* 28 – h3 */
--display-xs: 1.375rem; /* 22 – h4 */
/* Line heights */
--leading-tight: 1.08;
--leading-snug: 1.22;
--leading-normal: 1.5;
--leading-relaxed: 1.6;
/* Letter spacing */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-wider: 0.16em; /* uppercase eyebrow labels */
/* Semantic roles */
--eyebrow-size: 0.9375rem; /* 15px – slightly larger for readability */
--eyebrow-spacing: var(--tracking-wider);
}
/* ---- Optional helper classes (consumers may use tokens directly instead) ---- */
.lf-display {
font-family: var(--font-serif);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--text-strong);
}
.lf-eyebrow {
font-family: var(--font-sans);
font-size: var(--eyebrow-size);
font-weight: var(--weight-semibold);
letter-spacing: var(--eyebrow-spacing);
text-transform: uppercase;
color: var(--text-accent);
}
.lf-body {
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-relaxed);
color: var(--text-body);
}
/* SPACING */
/* Lagafater — Spacing tokens (4px base rhythm) */
:root {
--space-0: 0;
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 2.5rem; /* 40 */
--space-8: 3rem; /* 48 */
--space-9: 4rem; /* 64 */
--space-10: 5rem; /* 80 */
--space-11: 6rem; /* 96 */
--space-12: 8rem; /* 128 */
/* Layout */
--container-sm: 640px;
--container-md: 920px;
--container-lg: 1200px;
--container-xl: 1440px;
--gutter: var(--space-5);
--section-y: var(--space-11);
}
/* RADIUS */
/* Lagafater — Radius tokens
Gently soft corners — present but never bubbly; luxury restraint. */
:root {
--radius-xs: 3px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 36px;
--radius-pill: 999px;
--radius-circle: 50%;
}
/* SHADOWS */
/* Lagafater — Elevation tokens
Warm, brown-tinted shadows (never neutral gray) for an organic, sunlit feel.
Elevation is used sparingly; restraint reads as luxury. */
:root {
--shadow-xs: 0 1px 2px rgba(44, 40, 31, 0.06);
--shadow-sm: 0 1px 3px rgba(44, 40, 31, 0.08), 0 1px 2px rgba(44, 40, 31, 0.06);
--shadow-md: 0 4px 12px rgba(44, 40, 31, 0.10), 0 2px 4px rgba(44, 40, 31, 0.06);
--shadow-lg: 0 12px 28px rgba(44, 40, 31, 0.12), 0 4px 10px rgba(44, 40, 31, 0.07);
--shadow-xl: 0 24px 56px rgba(44, 40, 31, 0.16), 0 8px 18px rgba(44, 40, 31, 0.08);
/* Card-specific: soft warm lift */
--shadow-card: 0 2px 5px rgba(44, 40, 31, 0.05), 0 10px 28px rgba(44, 40, 31, 0.07);
/* Inset (sunken inputs) */
--shadow-inset: inset 0 1px 2px rgba(44, 40, 31, 0.08);
/* Focus ring */
--ring-focus: 0 0 0 3px var(--focus-ring);
/* Breakpoints (for reference in JS / documentation — note: CSS
@media rules cannot read custom properties, use literal px there) */
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
/* Transitions */
--transition-fast: 150ms ease-in-out;
--transition-base: 250ms ease-in-out;
--transition-slow: 350ms ease-in-out;
}
/* COMPONENTS */
/* Lagafater — Shared site components (navbar).
Class-based so page markup stays free of inline styles. */
/* ---- Site navbar ---- */
.site-nav {
background: var(--surface-raised);
border-bottom: 1px solid var(--border-subtle);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: var(--shadow-sm);
}
.site-nav__inner {
width: 100%;
box-sizing: border-box;
margin: 0 auto;
padding: var(--space-5) calc(var(--gutter) * 2);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
/* Safety net: if the logo + links + button can't all fit on one line
(narrow viewports), wrap onto a second row instead of forcing the
whole page to overflow horizontally. */
flex-wrap: wrap;
row-gap: var(--space-3);
}
.site-nav__logo {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--text-strong);
text-decoration: none;
}
/* Groups the links + Book Now button together so they sit right-aligned
against the nav's right edge, with the logo alone on the left. */
.site-nav__right {
display: flex;
align-items: center;
gap: var(--space-6);
flex-wrap: wrap;
justify-content: flex-end;
}
.site-nav__links {
display: flex;
gap: var(--space-6);
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.site-nav__link {
font-family: var(--font-sans);
color: var(--text-body);
text-decoration: none;
font-size: var(--text-base);
transition: color var(--transition-base);
}
.site-nav__link:hover {
color: var(--accent);
}
.site-nav__cta {
background: var(--accent);
color: var(--accent-contrast);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-md);
text-decoration: none;
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
transition: background var(--transition-base);
white-space: nowrap;
}
.site-nav__cta:hover {
background: var(--accent-hover);
}
@media (max-width: 640px) {
.site-nav__links {
gap: var(--space-4);
}
.site-nav__link {
font-size: var(--text-sm);
}
}