/* Inter is loaded via a in each page's (with preconnect), not @import
here — @import is render-blocking in a way a parallel-fetched isn't. */
:root {
/* Structura/Core — Buena's real design system, resolved from Figma (file 6NMmmp4IUPVofyMkX1fn8L) */
/* Grey scale */
--grey-50: #f6f6f6;
--grey-100: #e7e7e7;
--grey-200: #d1d1d1;
--grey-300: #b0b0b0;
--grey-400: #888888;
--grey-600: #5d5d5d;
--grey-700: #4f4f4f;
--grey-800: #454545;
--grey-900: #3d3d3d;
--grey-950: #262626;
/* Brand — Akaroa (warm tan/brown, the real accent) */
--akaroa-50: #f9f7f3;
--akaroa-100: #f0ece4;
--akaroa-200: #e1d8c7;
--akaroa-300: #cdbda3;
--akaroa-400: #b99f7e;
--akaroa-500: #ab8865;
--akaroa-600: #9d7859;
--akaroa-700: #83614b;
--akaroa-800: #6b5141;
--akaroa-900: #574237;
--akaroa-950: #2e221c;
/* Brand — Celeste (sage green, secondary neutral) */
--celeste-50: #f7f7f6;
--celeste-100: #eceeea;
--celeste-200: #d6dbd4;
--celeste-300: #b7c0b5;
--celeste-400: #909c8c;
--celeste-500: #6f7d6a;
--celeste-600: #5a6455;
--celeste-700: #475144;
--celeste-800: #3c4239;
--celeste-900: #313730;
--celeste-950: #181c17;
/* Sentiment scales */
--green-50: #effdf4;
--green-100: #dcfce9;
--green-500: #22c566;
--green-600: #17a350;
--green-700: #178040;
--red-50: #fdf4f3;
--red-100: #fce6e4;
--red-500: #e6594e;
--red-600: #d13c31;
--red-700: #af3026;
--yellow-50: #fdfbec;
--yellow-100: #fcf3c9;
--yellow-500: #ee9d13;
--yellow-600: #d1780e;
--blue-50: #eff4ff;
--blue-100: #dbe6fe;
--blue-500: #3b76f6;
--blue-600: #2463eb;
/* General tokens (Structura semantic names) */
--text-default: #000000;
--text-secondary: var(--grey-600);
--text-tetriary: var(--grey-400);
--text-disabled: var(--grey-200);
--text-accent: var(--akaroa-700);
--text-inverted: #ffffff;
--background-default: #ffffff;
--background-bold: var(--grey-50);
--background-bolder: var(--grey-100);
--border-default: var(--grey-50);
--border-bold: var(--grey-100);
--border-bolder: var(--grey-300);
--border-button-default: var(--grey-100);
--border-button-bold: var(--grey-200);
--border-button-bolder: var(--grey-300);
--button-accent-default: var(--akaroa-800);
--button-accent-bold: var(--akaroa-900);
--button-accent-bolder: var(--akaroa-950);
--button-accent-disabled: var(--grey-50);
--button-primary-default: #ffffff;
--button-primary-bold: var(--grey-50);
--button-primary-bolder: var(--grey-100);
--button-link-default: var(--akaroa-600);
--button-link-bold: var(--akaroa-700);
--button-link-bolder: var(--akaroa-800);
--button-link-disabled: var(--grey-200);
/* Marketing-page wash — warmer than grey-50, used as page background behind white cards */
--cream: #f6f4f0;
/* App-level aliases — keep these names stable so existing page CSS/JS needs no renaming */
--bg: var(--cream);
--surface: var(--background-default);
--border: var(--border-bold);
--text-primary: var(--text-default);
--text-muted: var(--text-tetriary);
--action: var(--button-accent-default);
--action-hover: var(--button-accent-bold);
--action-bg: var(--background-bold);
--accent-green: var(--green-600);
--accent-green-bg: var(--green-50);
--radius-lg: 16px;
--radius-md: 12px;
--radius-sm: 8px;
--radius-pill: 9999px;
--font: "Inter", -apple-system, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
--font-display: "Inter", -apple-system, "SF Pro Display", system-ui, sans-serif;
--shadow-raised: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
/* Belt-and-suspenders: nothing on these pages is meant to scroll horizontally, so if a
child element ever overflows (a canvas, a wide table, a stray tooltip near the edge)
it gets clipped instead of dragging the whole page sideways on mobile. */
overflow-x: hidden;
}
body {
background: var(--bg);
color: var(--text-primary);
font-family: var(--font);
font-weight: 500;
line-height: 1.5;
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
p {
letter-spacing: 0.005em;
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.02em;
}
a {
color: inherit;
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: var(--shadow-raised);
transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
select {
min-height: 46px;
width: 100%;
border: 1.5px solid var(--border-bolder);
border-radius: var(--radius-md);
padding: 0 14px;
font-family: var(--font);
font-size: 16px;
background: var(--background-default);
color: var(--text-primary);
transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder {
color: var(--text-tetriary);
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus {
background: var(--background-default);
border-color: var(--button-accent-default);
box-shadow: 0 0 0 4px rgba(107, 81, 65, 0.12);
}
select:focus,
button:focus {
outline: 1.5px solid var(--akaroa-800);
outline-offset: 1px;
}
input[type="range"] {
width: 100%;
height: 44px;
accent-color: var(--akaroa-800);
}
button {
min-height: 38px;
border: 1px solid var(--border-button-bold);
border-radius: var(--radius-pill);
background: var(--button-primary-default);
color: var(--text-default);
font-family: var(--font);
font-weight: 500;
font-size: 14px;
cursor: pointer;
padding: 0 16px;
transition: background-color 0.15s var(--ease), box-shadow 0.15s var(--ease), opacity 0.15s var(--ease);
}
button:hover {
box-shadow: var(--shadow-raised), 0 0 0 1px var(--border-button-bolder);
}
button.primary {
background: var(--button-accent-default);
color: var(--text-inverted);
border-color: var(--button-accent-default);
}
button.primary:hover {
background: var(--button-accent-bold);
border-color: var(--button-accent-bold);
opacity: 1;
box-shadow: none;
transform: translateY(-1px);
}
.text-secondary {
color: var(--text-secondary);
}
.text-muted {
color: var(--text-muted);
}
/* Visually hidden but readable by screen readers / search crawlers — for headings
that need to exist in the DOM for SEO/accessibility without duplicating a visual
title the page already shows another way (e.g. the wizard's per-step title). */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}