/* ============================================================
DESIGN TOKENS — the single source of cohesion.
Change a value here and it ripples through every section.
This file has TWO regions:
1) EDIT PER CLIENT — the entire re-skin surface (~20 palette
hexes + 2 font vars + 1 corner radius). Touch ONLY this.
2) STRUCTURAL — type scale, spacing, layout, motion.
These encode proportion/rhythm/feel, NOT brand. FROZEN.
Rule of thumb: if a value encodes brand IDENTITY (a colour, a
typeface, a corner radius) it lives in region 1. If it encodes
PROPORTION, RHYTHM, or MOTION FEEL it lives in region 2 — leave
it alone. The whole re-skin is region 1.
============================================================ */
:root {
/* ╔══════════════════════════════════════════════════════════╗
║ ===== EDIT PER CLIENT ===== ║
║ The swap surface. This block + the Google Fonts ║
║ in index.html + the images in assets/ = the whole skin. ║
╚══════════════════════════════════════════════════════════╝ */
/* — PALETTE (≈20 hexes) — THE BEAUTY SUITE · LIGHT PORCELAIN WORLD.
Re-derived from the three hair-derived brand tones in DESIGN.md /
tile.html — NOT Sharp's charcoal/terracotta. This is the INVERSION:
the dominant canvas is LIGHT porcelain; espresso is the SPARING deep
contrast; honey/taupe is the proof-seam warmth.
base Porcelain Blonde #F6EFE7 (dominant light canvas)
accent Honey Weft #C7A17E (regrip / action warmth)
support Espresso Root #4B382F (sparing deep-support contrast)
The starter's slot NAMES are kept so base.css aliases resolve, but the
VALUES are inverted: the --ink-* ramp now holds the ESPRESSO deep-support
family (used only by the sparing `espresso` sections), the light breath
slots hold the PORCELAIN canvas ramp, and the accent quartet is HONEY. */
/* DEEP-SUPPORT ramp (espresso family) — used ONLY by the sparing dark
`espresso` sections. Deepest → lighter internal seams. Warm root-brown
derived from Espresso Root #4B382F (R ≥ G ≥ B — warm, never blue/clinical). */
--ink-900: #3a2b23; /* deepest espresso — the sparing deep canvas */
--ink-850: #402f26; /* subtle internal shift within an espresso run */
--ink-800: #4b382f; /* Espresso Root — raised espresso surfaces / cards */
--ink-700: #5a4638; /* espresso seams / borders on espresso */
--slate-600: #6d5748; /* warm taupe-brown mids toward honey */
--slate-500: #8a7159;
--slate-400: #b19a80; /* muted text on espresso (honey-lifted, ≥4.5:1 on ink-900) */
--slate-300: #d8c6b0;
/* LIGHT "breath" surfaces: the dominant PORCELAIN canvas ramp + warm honey
taupe. Derived up toward white from Porcelain Blonde #F6EFE7; the champagne
seam warms toward Honey Weft. */
--marble-50: #f6efe7; /* Porcelain Blonde — the primary dominant light canvas */
--marble-100: #efe4d6; /* warmer taupe/honey breath — the champagne proof seam */
--cream: #fbf6ef; /* open near-white breath — the paper relief/close */
--stone-200: #e4d8c8; /* light borders / hairline-adjacent on porcelain */
--stone-500: #7a6852; /* muted text on porcelain (≥4.5:1 on base) */
--stone-700: #4b382f; /* Espresso Root — body text on porcelain (≥7:1 on base) */
/* ACCENT — Honey Weft, the regrip / action warmth (was Sharp's terracotta).
The 1-variable brand swap; the quartet: base, hover/active (deeper toward
espresso), tint (lighter toward porcelain), and a translucent wash. */
--terracotta: #c7a17e; /* Honey Weft — base accent */
--terracotta-deep: #a9825f; /* hover / active (deeper, honey→espresso) */
--terracotta-soft: #dcc0a2; /* tints (lighter honey) */
--terracotta-tint: rgba(199, 161, 126, 0.16); /* translucent honey wash */
/* Eyebrow/label TEXT ink — a deep honey-brown that stays warm but meets the
4.5:1 contrast checklist on every LIGHT ground (porcelain 5.6:1, champagne
5.3:1, paper 5.4:1). True honey (--terracotta ~2:1) is for MARKS/underlines/
arrows/emphasis, never small label text. Espresso-ground labels stay light. */
--eyebrow-ink: #6d5a45;
/* — FONTS (2 vars) — match the Google Fonts in index.html's .
The Beauty Suite: an editorial display SERIF (Prata) + a clean SANS body
(Manrope). Keep the system fallbacks. */
--font-display: 'Prata', Georgia, 'Times New Roman', serif;
--font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
/* — CORNER RADIUS (1 value) — the brand's corner language.
6px = softly tailored / human (not app-sharp, not pill-round). */
--radius: 6px;
/* ╔══════════════════════════════════════════════════════════╗
║ ===== END PER CLIENT — everything below is STRUCTURAL === ║
╚══════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════╗
║ ===== STRUCTURAL — DO NOT EDIT ===== ║
║ Type scale, spacing, layout, motion. Proportion/rhythm/ ║
║ feel — brand-agnostic. Copy verbatim across every site. ║
║ (Only touch --maxw* if a brand genuinely needs a wider ║
║ or narrower page feel — and even then, rarely.) ║
╚══════════════════════════════════════════════════════════╝ */
/* — Semantic text aliases — STRUCTURAL aliases re-pointed for a LIGHT world.
In The Beauty Suite the DOMINANT canvas is porcelain (light), so the
primary reading pair is espresso-on-porcelain (--text-on-light). The
--text-on-dark pair is used ONLY by the sparing `espresso` sections. */
--font-sans: var(--font-body);
--text-on-dark: #f6efe7; /* porcelain-tinted light text — ONLY on espresso sections (≥7:1 on ink-900) */
--text-on-dark-muted: var(--slate-400); /* honey-lifted muted on espresso (≥4.5:1) */
--text-on-light: var(--stone-700); /* espresso body on porcelain — the primary reading pair */
--text-on-light-muted: var(--stone-500); /* muted espresso-taupe on porcelain (≥4.5:1) */
/* — Fluid type scale — THE BEAUTY SUITE 3-SIZE RAMP (DESIGN.md T2.16):
exactly three header sizes — hero / section / mini. Variants are named
techniques within these three, NEVER a fourth ramp step. Values are
byte-faithful to DESIGN.md's token block + tile.html's :root. */
--step-hero: clamp(3rem, 6.6vw, 5.75rem); /* H1A — hero */
--step-section: clamp(1.7rem, 3vw, 2.8rem); /* H2A — section heads */
--step-mini: clamp(0.9rem, 0.82rem + 0.25vw, 1rem); /* H3A / Meta — mini */
/* Structural slot aliases → mapped onto the 3-size ramp so the frozen
base.css / sections.css consumers (--step-0 body, --step--1 eyebrow, and
the display sizes) keep resolving without a 4th ramp step. */
--step--1: var(--step-mini); /* eyebrows / labels → mini */
--step-0: clamp(0.98rem, 0.94rem + 0.22vw, 1.08rem); /* Body-A (Manrope body copy) */
--step-1: var(--step-mini);
--step-2: var(--step-section);
--step-3: var(--step-section);
--step-4: var(--step-section); /* H2A — section display */
--step-5: var(--step-hero); /* H1A — hero display */
--tracking-label: 0.2em; /* uppercase eyebrows / labels */
--leading-display: 0.98;
--leading-body: 1.62;
/* — Spacing (fluid rhythm) — */
--space-2xs: clamp(0.35rem, 0.3rem + 0.2vw, 0.5rem);
--space-xs: clamp(0.5rem, 0.42rem + 0.3vw, 0.75rem);
--space-s: clamp(0.85rem, 0.7rem + 0.5vw, 1.15rem);
--space-m: clamp(1.25rem, 1rem + 1vw, 1.85rem);
--space-l: clamp(2rem, 1.5rem + 2vw, 3.25rem);
--space-xl: clamp(3rem, 2rem + 4vw, 5.5rem);
--section-pad-y: clamp(4.5rem, 3rem + 7vw, 9rem); /* section vertical breathing */
--gutter: clamp(1.25rem, 0.6rem + 3.2vw, 4rem); /* page side padding */
--measure: 64ch; /* readable line length */
--maxw: 1280px;
--maxw-wide: 1560px;
/* — Motion — brand-agnostic timing/easing. */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
--dur-fast: 0.35s;
--dur: 0.6s;
--dur-slow: 1s;
/* — Misc structural — LIGHT-WORLD hairlines: dark-on-light (espresso wash),
not white-on-dark. The dominant canvas is porcelain, so rules read as a
fine espresso hairline. --hairline-dark keeps a lighter espresso for the
sparing espresso sections (where a near-white rule would be too loud). */
--hairline: rgba(75, 56, 47, 0.12); /* espresso @0.12 on porcelain */
--hairline-strong: rgba(75, 56, 47, 0.22); /* espresso @0.22 — stronger rule on light */
--hairline-dark: rgba(246, 239, 231, 0.14); /* porcelain @0.14 — rules inside espresso sections */
--nav-h: 4.75rem;
}