/* ============================================================
DESIGN TOKENS — the single source of cohesion.
Change a value here and it ripples through every section.
CLIENT: Milo Coffee House — Portland, TN
MODEL: LIGHT-DOMINANT. Bright buttermilk canvas + ONE dark
proof seam (cell 5) + ONE teal utility regrip (cell 6).
(Inverts the starter's dark-dominant Sharp model.)
This file has TWO regions:
1) EDIT PER CLIENT — the entire re-skin surface (palette,
fonts, radius). Milo values are seated below.
2) STRUCTURAL — type scale, spacing, layout, motion.
These encode proportion/rhythm/feel, NOT brand. FROZEN,
EXCEPT the hero/section/mini ramp is Milo's per DESIGN.md.
Source-of-truth for every palette value = the gaveled style
tile's CSS custom props (tile.html) + DESIGN.md token block.
Sample REAL pixels; never narrate intent.
============================================================ */
:root {
/* ╔══════════════════════════════════════════════════════════╗
║ ===== EDIT PER CLIENT — MILO SKIN ===== ║
║ This block + the Google Fonts in index.html + ║
║ the images in assets/ = the whole skin. ║
╚══════════════════════════════════════════════════════════╝ */
/* — PALETTE — Milo is LIGHT-DOMINANT. Values byte-faithful from
tile.html + DESIGN.md. base=buttermilk canvas (dominant);
accent=teal (utility/secondary); support=marigold (PRIMARY
action + headline emphasis); one warm dark seam (cell 5). */
/* Brand base: the DOMINANT bright buttermilk paper canvas. */
--base: #F7F1E7; /* Buttermilk Paper — dominant page canvas (DESIGN.md --base) */
--paper-raised: #fffaf1; /* cream-strong — raised cards (tile --cream-strong) */
--paper-soft: #f3e8d5; /* cream-soft tint (tile --cream-soft) */
--paper-line: rgba(59, 46, 40, 0.12); /* hairline rule on paper (tile --rule) */
--paper-line-strong: rgba(59, 46, 40, 0.24); /* stronger rule (tile --rule-strong) */
/* ACCENT — Milo Teal — utility / secondary action / dividers. */
--accent: #4CB5C8; /* Milo Teal (DESIGN.md --accent) */
--teal-deep: #1f6d79; /* teal hover/active + text on light (tile --teal-deep) */
--teal-soft: rgba(76, 181, 200, 0.18); /* translucent teal wash (tile --teal-soft) */
/* SUPPORT — Marigold Clay — PRIMARY action + headline emphasis (.em). */
--support: #C9723B; /* Marigold Clay (DESIGN.md --support) */
--support-deep: #a95c2c; /* marigold hover/active */
--marigold-soft: rgba(201, 114, 59, 0.16); /* translucent marigold wash (tile --marigold-soft) */
/* THE ONE DARK SEAM (cell 5) — warm dark-teal preferred (frames warm
room photos per the tile); warm espresso is the alt surface. */
--espresso-teal: #35545d; /* dark-teal seam top (tile dark gradient) */
--espresso: #4d3a31; /* warm espresso alt surface (tile --espresso) */
/* Text on light (the DEFAULT — Milo is light-dominant). */
--ink: #3b2e28; /* body + heading text on light (tile --ink) */
--ink-soft: #6f5e56; /* muted text on light (tile --ink-soft) */
/* Shadows — warm, soft (tile --shadow / --shadow-soft). */
--shadow: 0 28px 80px rgba(86, 63, 43, 0.14);
--shadow-soft: 0 16px 36px rgba(86, 63, 43, 0.10);
/* — FONTS (2 vars) — match the Google Fonts in . */
--font-display: 'DM Serif Display', Georgia, serif;
--font-body: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
/* — CORNER RADIUS — tray-and-menu-card friendly (DESIGN.md). */
--radius: 14px;
/* ╔══════════════════════════════════════════════════════════╗
║ ===== END PER CLIENT — everything below is STRUCTURAL === ║
╚══════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════╗
║ ===== STRUCTURAL — DO NOT EDIT ===== ║
║ Spacing, layout, motion. Proportion/rhythm/feel — ║
║ brand-agnostic. (Type ramp below is Milo's 3-size ramp ║
║ per DESIGN.md — the ONE structural exception.) ║
╚══════════════════════════════════════════════════════════╝ */
/* — Semantic text aliases — FLIPPED for a light-dominant site:
on-light is the DEFAULT; on-dark serves the single seam. */
--font-sans: var(--font-body);
--text-on-light: var(--ink);
--text-on-light-muted: var(--ink-soft);
--text-on-dark: #fffaf1; /* cream text on the espresso seam */
--text-on-dark-muted: rgba(255, 250, 241, 0.84); /* lifted from 0.72 → clears 4.5:1 across the full espresso gradient (was 3.82:1 at the dark end) */
/* — Fluid type scale — clamp(min, fluid, max). The typographic rhythm.
Milo runs exactly 3 header sizes (hero / section / mini) per
DESIGN.md; the named --step-hero/-section/-mini below are the
Milo ramp. The generic --step--1..--step-5 slots are kept mapped
onto that ramp so any structural rule referencing them still holds. */
--step-hero: clamp(3.25rem, 6.1vw, 6.1rem); /* H1A — hero display */
--step-section: clamp(1.95rem, 3vw, 3.1rem); /* H2A — section heads */
--step-mini: clamp(0.98rem, 0.9rem + 0.22vw, 1.1rem); /* H3A — card labels / utility heads */
--step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.875rem); /* meta / eyebrow */
--step-0: clamp(0.98rem, 0.94rem + 0.22vw, 1.08rem); /* body */
--step-1: var(--step-mini);
--step-2: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); /* sub-heads within the mini/section range */
--step-3: var(--step-section);
--step-4: var(--step-section);
--step-5: var(--step-hero);
--tracking-label: 0.16em; /* uppercase eyebrows / labels (tile) */
--leading-display: 0.98;
--leading-body: 1.58;
/* — 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 — */
--hairline: rgba(255, 255, 255, 0.12); /* on the dark seam */
--hairline-strong: rgba(255, 255, 255, 0.22);
--hairline-dark: var(--paper-line); /* on paper */
--nav-h: 4.75rem;
}