/* ============================================================
gini.tang.net.nz — shared design tokens
The one file every concept imports. Palette, type, scale.
Concepts may ADD tokens of their own; do not redefine these.
Fonts are loaded from Google Fonts. Put this in your
BEFORE this stylesheet:
============================================================ */
:root {
/* ---- Palette -------------------------------------------------
Drawn from Gini's own portfolio brand colours (the coral,
ochre and dusty blue are lifted straight off her cover page)
plus the moss/garden brief. */
--canvas: #F2EDE1; /* page ground — warm off-white paper */
--canvas-deep: #E6DECD; /* recessed panels, alternating bands */
--ink: #33302A; /* body + headings */
--ink-soft: #6B6459; /* captions, meta, secondary */
--moss-deep: #2E3D2C; /* darkest green — footers, overlays */
--moss: #55693F; /* primary green — links, rules */
--sage: #93A183; /* light green — hairlines, tints */
--ochre: #C89A3C; /* warm accent */
--coral: #E1584B; /* hot accent — use sparingly */
--dusty-blue: #7C97AC; /* cool accent */
/* Convenience surfaces */
--rule: rgba(51, 48, 42, 0.14);
--rule-strong: rgba(51, 48, 42, 0.30);
--paper: #FBF8F1; /* the A4 sheets themselves — near-white */
--overlay-scrim: linear-gradient(
180deg,
rgba(20, 26, 19, 0.15) 0%,
rgba(20, 26, 19, 0.55) 55%,
rgba(20, 26, 19, 0.80) 100%);
/* ---- Type ----------------------------------------------------
Display echoes the classical small-caps serif Gini set her own
portfolio in. Body is a warmer, rounder companion serif. */
--font-display: "Cormorant Garamond", "Cormorant", Garamond,
"EB Garamond", "Times New Roman", Times, serif;
--font-body: "Lora", "Georgia", "Iowan Old Style",
"Palatino Linotype", Palatino, serif;
/* Fluid type scale — clamp(min, preferred, max) */
--t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.83rem);
--t-sm: clamp(0.88rem, 0.85rem + 0.18vw, 0.97rem);
--t-base: clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);
--t-md: clamp(1.18rem, 1.10rem + 0.40vw, 1.38rem);
--t-lg: clamp(1.45rem, 1.28rem + 0.85vw, 2.00rem);
--t-xl: clamp(1.95rem, 1.55rem + 2.00vw, 3.00rem);
--t-2xl: clamp(2.60rem, 1.80rem + 4.00vw, 4.75rem);
--t-3xl: clamp(3.20rem, 1.90rem + 6.50vw, 7.00rem);
--leading-tight: 1.12;
--leading-snug: 1.30;
--leading-body: 1.62;
--leading-loose: 1.80;
--tracking-caps: 0.14em; /* for the small-caps / letterspaced bits */
--tracking-wide: 0.04em;
/* ---- Spacing scale (8px base, geometric-ish) ---------------- */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4rem;
--s-9: 6rem;
--s-10: 8rem;
--s-11: 12rem;
/* Fluid section rhythm */
--section-y: clamp(3rem, 2rem + 5vw, 8rem);
--gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3.5rem);
/* ---- Widths -------------------------------------------------- */
--max-content: 1180px; /* the main column */
--max-prose: 62ch; /* readable measure for her writing */
--max-wide: 1520px; /* for near-full-bleed grids */
/* ---- Paper / elevation ---------------------------------------
--shadow-paper is THE token for the A4 sheets Gini asked for
("some on shadowed a4 sheets"). Use it on the sheet images. */
--shadow-paper: 0 1px 2px rgba(51, 48, 42, 0.08),
0 10px 24px -8px rgba(51, 48, 42, 0.22),
0 28px 60px -24px rgba(51, 48, 42, 0.26);
--shadow-paper-lift: 0 2px 4px rgba(51, 48, 42, 0.10),
0 18px 40px -10px rgba(51, 48, 42, 0.28),
0 46px 90px -30px rgba(51, 48, 42, 0.32);
--shadow-soft: 0 6px 18px -6px rgba(51, 48, 42, 0.18);
--radius-none: 0;
--radius-sm: 2px;
--radius-md: 4px;
/* ---- Motion --------------------------------------------------- */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--dur-fast: 180ms;
--dur: 320ms;
--dur-slow: 620ms;
/* ---- Asset roots ---------------------------------------------
Every concept lives one directory deep (public/concepts//),
so assets resolve as ../assets/... from a concept's index.html. */
--art: "../assets/art";
--work: "../assets/work";
}
@media (prefers-reduced-motion: reduce) {
:root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}