/* =========================================================
Lucent — Design Tokens
A whimsical, sunlit corner: light through trees, paper warmth,
storybook color. Tokens map closely to the moodboard palette.
========================================================= */
/* ---------- WEBFONTS ---------- */
@font-face {
font-family: "Lavishly Yours";
src: url("./fonts/LavishlyYours-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Newsreader + Nunito + JetBrains Mono are loaded via Google Fonts.
Add to of any page:
*/
:root {
/* ---------- COLOR — RAW PALETTE ---------- */
/* Paper & ink — clean white paper, cool blue-black ink.
The ink hue is picked from the line work in the moodboard
illustrations: a deep midnight navy, not pure black. */
--paper-50: #FFFFFF; /* page background — true white */
--paper-100: #F7F8FA; /* card on paper, very light cool */
--paper-200: #ECEEF2; /* soft divider, tag bg */
--paper-300: #D7DAE0; /* muted line */
--ink-900: #0F1A2B; /* blue-black, headings */
--ink-700: #2A3A55; /* body text */
--ink-500: #4F6181; /* meta, captions */
--ink-300: #8B96AB; /* muted */
/* Sunlight — warm primaries (terracotta rooftops + golden light) */
--terracotta-700: #B85A3E;
--terracotta-500: #D97757; /* primary warm accent */
--terracotta-300: #ECB199;
--terracotta-100: #F7DDD0;
--gold-700: #B8862E;
--gold-500: #E2A93B; /* sunlight highlight */
--gold-200: #F4D896;
/* Foliage — sage and deep forest greens */
--moss-800: #3B5A33; /* deep forest line */
--moss-600: #5C8A4A; /* canopy */
--moss-400: #8FB57A; /* spring leaf */
--moss-200: #D2E2BE; /* mossy tint */
--moss-50: #EEF3E2; /* tag bg */
/* Wisteria — soft purples for accents and headings emphasis */
--wisteria-700: #7A5A99;
--wisteria-500: #A586C3;
--wisteria-200: #DCCCE8;
--wisteria-50: #F1EBF6;
/* Lagoon — sky + water for links and quiet info */
--lagoon-800: #1F5F73;
--lagoon-600: #3D8FA6;
--lagoon-400: #7CC0D1;
--lagoon-100: #D6ECF1;
/* Geranium — strawberry red, use sparingly */
--geranium-600: #C73E55;
--geranium-500: #E15A6E;
--geranium-200: #F4C2CB;
/* ---------- COLOR — SEMANTIC ---------- */
--bg: var(--paper-50);
--bg-elev: var(--paper-100); /* cards */
--bg-sunk: #F1F3F7; /* inputs, code blocks */
--bg-tag: var(--paper-200);
--bg-overlay: rgba(15, 26, 43, 0.55);
--fg: var(--ink-900); /* primary text */
--fg-2: var(--ink-700); /* body */
--fg-3: var(--ink-500); /* meta */
--fg-4: var(--ink-300); /* hints */
--fg-on-dark: var(--paper-50);
--line: #E4E6EB; /* hairline divider, cool */
--line-strong: var(--paper-300);
--accent: var(--terracotta-500); /* primary brand accent */
--accent-hover: var(--terracotta-700);
--accent-soft: var(--terracotta-100);
--link: var(--lagoon-600);
--link-hover: var(--lagoon-800);
--success: var(--moss-600);
--warning: var(--gold-700);
--danger: var(--geranium-600);
--info: var(--wisteria-700);
--selection-bg: var(--gold-200);
--selection-fg: var(--ink-900);
/* ---------- TYPOGRAPHY — FAMILIES ---------- */
--font-script: "Lavishly Yours", "Snell Roundhand", cursive; /* wordmark only */
--font-serif: "Newsreader", "Iowan Old Style", "Georgia", serif; /* literary display + prose */
--font-sans: "Nunito", -apple-system, "Helvetica Neue", sans-serif;/* UI + body alt */
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
/* ---------- TYPE SCALE (1.25 — major third) ---------- */
--fs-12: 0.75rem;
--fs-14: 0.875rem;
--fs-16: 1rem;
--fs-18: 1.125rem;
--fs-20: 1.25rem;
--fs-24: 1.5rem;
--fs-30: 1.875rem;
--fs-36: 2.25rem;
--fs-48: 3rem;
--fs-64: 4rem;
--fs-80: 5rem;
/* Line heights */
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-normal: 1.5;
--lh-prose: 1.7; /* long-form reading */
/* Tracking */
--tr-tight: -0.02em;
--tr-snug: -0.01em;
--tr-normal: 0;
--tr-wide: 0.04em;
--tr-eyebrow:0.12em; /* uppercase eyebrows */
/* ---------- SPACING (4px base) ---------- */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-8: 32px;
--s-10: 40px;
--s-12: 48px;
--s-16: 64px;
--s-20: 80px;
--s-24: 96px;
/* ---------- RADII ---------- */
--r-1: 4px;
--r-2: 8px;
--r-3: 12px;
--r-4: 18px; /* cards — slightly soft, hand-rolled feel */
--r-5: 24px;
--r-pill: 999px;
/* ---------- SHADOWS — soft, blue-black ink tone ---------- */
--shadow-1: 0 1px 0 rgba(15,26,43,0.04), 0 1px 2px rgba(15,26,43,0.05);
--shadow-2: 0 2px 6px rgba(15,26,43,0.06), 0 8px 18px rgba(15,26,43,0.05);
--shadow-3: 0 6px 14px rgba(15,26,43,0.08), 0 18px 36px rgba(15,26,43,0.08);
--shadow-warm: 0 10px 30px -10px rgba(217,119,87,0.35); /* terracotta glow on primary CTAs */
--shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(15,26,43,0.04);
/* ---------- MOTION ---------- */
--ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* default */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* arrivals */
--ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* exits */
--dur-1: 120ms;
--dur-2: 200ms;
--dur-3: 320ms;
--dur-4: 520ms;
}
/* =========================================================
SEMANTIC TYPE PRESETS — use as classes or @extend.
========================================================= */
.h-display { /* hero, marketing only */
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(2.5rem, 5vw + 1rem, var(--fs-80));
line-height: var(--lh-tight);
letter-spacing: var(--tr-tight);
color: var(--fg);
}
.h-wordmark { /* "Lucent" wordmark only */
font-family: var(--font-script);
font-weight: 400;
font-size: var(--fs-48);
line-height: 1;
color: var(--ink-900);
letter-spacing: 0.01em;
}
.h1, h1 {
font-family: var(--font-serif);
font-weight: 500;
font-size: var(--fs-48);
line-height: var(--lh-tight);
letter-spacing: var(--tr-tight);
color: var(--fg);
}
.h2, h2 {
font-family: var(--font-serif);
font-weight: 500;
font-size: var(--fs-36);
line-height: var(--lh-snug);
letter-spacing: var(--tr-snug);
color: var(--fg);
}
.h3, h3 {
font-family: var(--font-serif);
font-weight: 600;
font-size: var(--fs-24);
line-height: var(--lh-snug);
color: var(--fg);
}
.h4, h4 {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-18);
line-height: var(--lh-snug);
letter-spacing: var(--tr-snug);
color: var(--fg);
}
.eyebrow {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-12);
text-transform: uppercase;
letter-spacing: var(--tr-eyebrow);
color: var(--accent);
}
.lede {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: var(--fs-24);
line-height: var(--lh-snug);
color: var(--fg-2);
}
.p, p {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--fs-18);
line-height: var(--lh-prose);
color: var(--fg-2);
text-wrap: pretty;
}
.ui {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-16);
line-height: var(--lh-normal);
color: var(--fg);
}
.meta {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-14);
color: var(--fg-3);
letter-spacing: 0.01em;
}
.caption {
font-family: var(--font-sans);
font-style: italic;
font-size: var(--fs-14);
color: var(--fg-3);
}
.code, code, kbd, pre {
font-family: var(--font-mono);
font-size: 0.92em;
color: var(--ink-700);
}
pre {
background: var(--bg-sunk);
border: 1px solid var(--line);
border-radius: var(--r-3);
padding: var(--s-4) var(--s-5);
line-height: var(--lh-normal);
overflow: auto;
}
a {
color: var(--link);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--dur-2) var(--ease-soft);
}
a:hover { color: var(--link-hover); }
::selection { background: var(--selection-bg); color: var(--selection-fg); }
/* =========================================================
PAGE DEFAULTS
========================================================= */
html, body {
background: var(--bg);
color: var(--fg-2);
font-family: var(--font-serif);
font-size: var(--fs-18);
line-height: var(--lh-prose);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}