/* ============================================================
ANTESTO DESIGN SYSTEM — Colors & Typography
Version 1.0 | April 2026
OKLCH color space; Google Fonts: Archivo + Source Serif 4
============================================================ */
/* Fonts loaded via in each page's
(build.mjs writes the tag, plus a for the
heading font). The @import was removed because @import is
render-blocking and serialises behind this stylesheet; using
in the HTML parser lets the browser fetch the font CSS in parallel. */
/* ── OCHRE THEME (default) ──────────────────────────────────── */
:root,
[data-theme="ochre"] {
/* Base Colors */
--color-bg: oklch(0.16 0.01 70); /* #1F1A14 Warm Black */
--color-card: oklch(0.22 0.012 70); /* #2E281F Card surface */
--color-secondary: oklch(0.22 0.012 70); /* #2E281F Footer / mobile nav */
--color-muted: oklch(0.24 0.013 70); /* #342D24 Input backgrounds */
--color-border: oklch(0.29 0.015 70); /* #3F3830 Dividers */
/* Accent */
--color-accent: oklch(0.62 0.13 75); /* #8B6A2F Muted Ochre — CTA, action */
--color-accent-hover:oklch(0.68 0.13 75); /* slightly lighter on hover */
/* Text */
--color-fg: oklch(0.95 0.01 80); /* #F3F0EA Primary text */
--color-fg-muted: oklch(0.78 0.012 80); /* #BFB8AB Secondary text */
--color-fg-on-accent:oklch(0.17 0.01 75); /* #211C13 Text on ochre button */
}
/* ── VIOLET THEME ───────────────────────────────────────────── */
[data-theme="violet"] {
/* Base Colors */
--color-bg: oklch(0.16 0.04 300); /* #1A0F2E Deep Violet */
--color-card: oklch(0.20 0.045 300); /* #251840 Card surface */
--color-secondary: oklch(0.22 0.04 300); /* #2A1D45 Footer / mobile nav */
--color-muted: oklch(0.24 0.035 300); /* #30254A Input backgrounds */
--color-border: oklch(0.30 0.05 290); /* #3D2F5A Dividers */
/* Accent */
--color-accent: oklch(0.82 0.17 85); /* #D4A017 Warm Gold — CTA, action */
--color-accent-hover:oklch(0.87 0.17 85); /* slightly lighter on hover */
/* Text */
--color-fg: oklch(0.96 0.005 300); /* #F2F0F4 Primary text */
--color-fg-muted: oklch(0.72 0.02 300); /* #A99DB8 Secondary text */
--color-fg-on-accent:oklch(0.18 0.04 300); /* #1E1235 Text on gold button */
}
/* ── SEMANTIC ALIASES ───────────────────────────────────────── */
:root {
--bg-page: var(--color-bg);
--bg-surface: var(--color-card);
--bg-input: var(--color-muted);
--border: var(--color-border);
--text-primary: var(--color-fg);
--text-secondary: var(--color-fg-muted);
--interactive: var(--color-accent);
--interactive-hover: var(--color-accent-hover);
--interactive-text: var(--color-fg-on-accent);
}
/* ── TYPOGRAPHY SCALE ───────────────────────────────────────── */
:root {
--font-heading: 'Archivo', Arial, sans-serif;
--font-body: 'Source Serif 4', Georgia, serif;
/* Scale */
--text-hero: clamp(4.5rem, 8vw, 6rem); /* Hero Display */
--text-h1: clamp(3rem, 5vw, 4rem); /* H1 / Display */
--text-h2: clamp(2.25rem, 3.5vw, 3rem); /* H2 */
--text-h3: 1.875rem; /* 30px */
--text-h4: 1.5rem; /* 24px */
--text-body: 1.125rem; /* 18px */
--text-small: 0.9375rem; /* 15px */
--text-caption: 0.8125rem; /* 13px */
--text-nav: 0.875rem; /* 14px */
--text-btn: 0.875rem; /* 14px */
/* Leading (line-height) */
--leading-display: 1.0;
--leading-h1: 0.95;
--leading-h2: 1.1;
--leading-h3: 1.2;
--leading-h4: 1.3;
--leading-body: 1.6;
--leading-small: 1.375;
--leading-caption: 1.125;
--leading-nav: 1.5;
/* Tracking */
--tracking-heading: -0.01em;
--tracking-nav: 0.04em;
--tracking-btn: 0.02em;
/* Measure (max line length) */
--measure: 68ch;
}
/* ── SPACING SCALE ──────────────────────────────────────────── */
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;
--space-32: 128px;
}
/* ── BORDER RADIUS ──────────────────────────────────────────── */
:root {
--radius-sm: 2px; /* badges, tags */
--radius: 4px; /* default: inputs, cards, buttons */
--radius-lg: 8px; /* modals, large panels */
}
/* ── ELEVATION (no shadows — color-based) ───────────────────── */
:root {
--elevation-0: var(--color-bg);
--elevation-1: var(--color-card);
--elevation-2: var(--color-muted);
}
/* ── MOTION ─────────────────────────────────────────────────── */
:root {
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 200ms;
--duration-base: 300ms;
--duration-slow: 600ms;
}
/* ── BASE RESETS ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ── HEADING STYLES ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
letter-spacing: var(--tracking-heading);
text-wrap: balance;
margin: 0;
}
h1 { font-size: var(--text-h1); line-height: var(--leading-h1); }
h2 { font-size: var(--text-h2); line-height: var(--leading-h2); }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }
h4 { font-size: var(--text-h4); line-height: var(--leading-h4); }
p {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
text-wrap: pretty;
max-width: var(--measure);
margin: 0;
color: var(--text-secondary);
}
/* ── COMPONENT ATOMS ────────────────────────────────────────── */
/* Button — Primary */
.btn-primary {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: var(--interactive);
color: var(--interactive-text);
font-family: var(--font-heading);
font-size: var(--text-btn);
font-weight: 600;
letter-spacing: var(--tracking-btn);
line-height: 1;
padding: 12px 24px;
border-radius: var(--radius);
border: none;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
opacity var(--duration-fast) var(--ease-out);
}
.btn-primary:hover { background: var(--interactive-hover); }
.btn-primary:focus-visible { outline: 2px solid var(--interactive); outline-offset: 2px; }
/* Button — Ghost */
.btn-ghost {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: transparent;
color: var(--text-primary);
font-family: var(--font-heading);
font-size: var(--text-btn);
font-weight: 600;
letter-spacing: var(--tracking-btn);
line-height: 1;
padding: 11px 23px;
border-radius: var(--radius);
border: 1px solid var(--border);
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.btn-ghost:hover { border-color: var(--interactive); color: var(--interactive); }
/* Input */
.input {
background: var(--bg-input);
color: var(--text-primary);
font-family: var(--font-body);
font-size: var(--text-body);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px 14px;
width: 100%;
outline: none;
transition: border-color var(--duration-fast) var(--ease-out);
}
.input:focus { border-color: var(--interactive); }
.input::placeholder { color: var(--text-secondary); opacity: 0.6; }
/* Card */
.card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-8);
}
/* Badge */
.badge {
display: inline-block;
font-family: var(--font-heading);
font-size: var(--text-caption);
font-weight: 600;
letter-spacing: 0.04em;
padding: 3px 8px;
border-radius: var(--radius-sm);
background: color-mix(in oklch, var(--interactive) 15%, transparent);
color: var(--interactive);
}