/* Datum Pulse design tokens — copied from the design system (tokens/*.css). Keep in sync with design/handover/tokens.css. */
/* Fonts are self-hosted in assets/fonts (no Google Fonts request). */
@font-face{font-family:"Suaco";src:url("assets/fonts/suaco-400.woff2") format("woff2"),url("assets/fonts/suaco-400.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("assets/fonts/hanken-grotesk-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("assets/fonts/hanken-grotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("assets/fonts/hanken-grotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("assets/fonts/dm-mono-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("assets/fonts/dm-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
/* Paper & ink — sampled off bathhouse walls. #000 and #FFF appear nowhere. */
--paper-1:#F2EEE7;
--paper-0:#FAF8F4;
--ink:#23261E;
--hairline:#DFD8CA;
--ink-2:#5B5E55;
--ink-3:#8A8C83;
--paper-2:#E9E3D8;
/* Pigments — colour carries place */
--clay:#A62B1B;
--clay-deep:#8A2316;
--sage:#779273;
--green:#4F6650;
--brass:#A2794F;
--plum:#6B3040;
--teal:#35564A;
--oxblood:#33191A;
/* Pulse — the brand ground (glass surfaces sit on it) */
--pulse-1:#C9A995;
--pulse-2:#B3634E;
--pulse-3:#A62B1B;
--pulse-4:#6B2A22;
--pulse-gradient:linear-gradient(150deg,#D9BFAE 0%,#C08068 30%,#B24A36 62%,#8F3A2E 100%);/* @kind color */
--glass-fill:rgba(255,255,255,.18);
--glass-fill-strong:rgba(255,255,255,.28);
--glass-stroke:rgba(255,255,255,.36);
--glass-text:#FBF3EE;
--glass-text-2:rgba(251,243,238,.72);
/* Semantic */
--surface-page:var(--paper-1);
--surface-card:var(--paper-0);
--surface-sunken:var(--paper-2);
--surface-inverse:var(--ink);
--text-body:var(--ink);
--text-muted:var(--ink-2);
--text-faint:var(--ink-3);
--text-on-clay:var(--paper-0);
--text-on-pigment:var(--paper-0);
--border-hairline:var(--hairline);
--border-strong:var(--ink);
--action:var(--clay);
--action-hover:var(--clay-deep);
--brand:var(--sage);
--status-booked:var(--green);
--status-planned:var(--brass);
--status-idea:var(--ink-3);
--error:var(--oxblood);
--reserve:var(--teal);
--focus-ring:0 0 0 2px var(--paper-1),0 0 0 4px var(--clay);
/* City pigments — no city is ever clay */
--city-ams:var(--green);
--city-bcn:var(--brass);
--city-par:var(--plum);
--city-reserve:var(--teal);
}

:root{
--font-display:"Suaco",Georgia,serif;
--font-ui:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
--font-data:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
--weight-display:400;
--weight-ui:300;
--weight-ui-medium:400;
--weight-label:500;
--weight-data:300;
/* Display · Suaco 400 */
--display-xl:104px;
--display-l:64px;
--display-m:44px;
--display-s:30px;
--display-xs:22px;
--display-leading:1;
--display-tracking:-.01em;
/* UI · Hanken Grotesk 300 */
--ui-l:18px;
--ui-m:15px;
--ui-s:13px;
--ui-leading:1.5;
/* Label · Hanken 500 caps */
--label-m:11px;
--label-s:10px;
--label-tracking:.26em;
--label-tracking-sentence:.04em;
--label-leading:1.4;
/* Data · DM Mono 300 */
--data-l:16px;
--data-m:13px;
--data-s:11px;
--data-leading:1.6;
--data-tracking:.02em;
/* Semantic */
--text-headline:var(--weight-display) var(--display-m)/var(--display-leading) var(--font-display);
--text-body-style:var(--weight-ui) var(--ui-m)/var(--ui-leading) var(--font-ui);
--text-label:var(--weight-label) var(--label-m)/var(--label-leading) var(--font-ui);
--text-data:var(--weight-data) var(--data-m)/var(--data-leading) var(--font-data);
}

:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-24:96px;
/* Semantic · inset 24 (card) · gap 12 (between cards) · section 40 · major 96 · screen edge 20 */
--inset:24px;
--gap:12px;
--gap-tight:8px;
--section:40px;
--major:96px;
--screen-edge:20px;
--control-h:44px;
--control-h-s:36px;
--control-px:20px;
}

:root{
/* Nothing sharper than 6px */
--radius-xs:6px;
--radius-m:14px;
--radius-card:28px;
--radius-dialog:40px;
--radius-pill:999px;
--radius-arch:50% 50% 0 0 / 40% 40% 0 0;
}

:root{
/* Hairline first, shadow almost never. Wide, low, warm; never dark enough to read as a border. */
--shadow-none:none;
--shadow-rest:0 1px 0 rgba(35,38,30,.04);
--shadow-raised:0 14px 40px -12px rgba(107,42,34,.16);
--shadow-dialog:0 32px 80px -24px rgba(51,25,26,.28);
--glass-blur:blur(18px) saturate(1.1);/* @kind other */
--hairline-w:1px;
}

:root{
/* Fades and 14px rises. Nothing bounces, nothing overshoots. */
--ease-standard:cubic-bezier(.22,.61,.36,1);/* @kind other */
--ease-entrance:cubic-bezier(.16,.84,.44,1);/* @kind other */
--dur-hover:180ms;/* @kind other */
--dur-base:280ms;/* @kind other */
--dur-entrance:460ms;/* @kind other */
--dur-arc:900ms;/* @kind other */
--stagger:70ms;/* @kind other */
--rise:14px;
--pulse-period:2.4s;/* @kind other */
}
@keyframes datum-rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:translateY(0)}}
@keyframes datum-fade{from{opacity:0}to{opacity:1}}
@keyframes datum-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){:root{--dur-hover:0ms;/* @kind other */--dur-base:0ms;/* @kind other */--dur-entrance:0ms;/* @kind other */--dur-arc:0ms/* @kind other */}}

:root{
/* Phone product 390×844; header 64, tab bar 72, pinned, opaque on paper-0 with a hairline */
--app-width:390px;
--app-height:844px;
--app-header-h:64px;
--app-tabbar-h:72px;
--web-max:1200px;
--web-gutter:48px;
--deck-w:1920px;
--deck-h:1080px;
}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--text-body-style);font-feature-settings:"kern"}
a{color:var(--clay);text-decoration:none;transition:color var(--dur-hover) var(--ease-standard)}
a:hover{color:var(--clay-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
::selection{background:rgba(166,43,27,.18)}