/* ========================================================================== Milo & Mol — Design tokens Direction: a linen-bound keepsake album. Pressed botanicals under tissue, letterpress-deep serif, hand-numbered sections. Printed and kept, not scrolled past. Single source of truth for colour, type, spacing and motion. Change values here, not in the section stylesheets. ========================================================================== */ :root { /* --- Brand palette ----------------------------------------------------- Taken from the agreed swatches and the logo artwork. */ --c-ivory: #f6f2e7; /* page / paper */ --c-ivory-deep: #ece5d4; /* alternating band, tissue layer */ --c-sage: #a3b493; /* supporting botanical green */ --c-sage-soft: #cfd8c6; /* tints, rules, borders */ --c-rose: #e8c9c3; /* dusty rose — accents, highlights */ --c-rose-soft: #f3e2de; --c-taupe: #c2a183; /* warm neutral — secondary text, borders */ --c-taupe-soft: #e2d2c1; --c-olive: #52663f; /* mid olive — buttons, links */ --c-ink: #2f3d24; /* deep logo green — headings, body text */ --c-ink-soft: #56654a; /* muted body copy */ --c-white: #fffdf8; /* --- Semantic roles ---------------------------------------------------- */ --bg-page: var(--c-ivory); --bg-band: var(--c-ivory-deep); --bg-card: var(--c-white); --bg-invert: var(--c-ink); --text-primary: var(--c-ink); --text-secondary: var(--c-ink-soft); /* Measured: 5.28:1 on ivory, 4.71:1 on the band, 5.81:1 on white. The lighter sage-grey this replaced sat at 3.03:1, which failed WCAG AA for the small text it is used on (eyebrows, card meta, form notes). */ --text-muted: #5c6851; --text-invert: var(--c-ivory); --accent: var(--c-olive); --accent-hover: #3d4e2c; --rule: #d8cfbb; --rule-strong: #c0b49a; --focus-ring: var(--c-olive); /* --- Typography -------------------------------------------------------- Two families only. Fraunces — a soft old-style serif with optical sizing and a "wonk" axis. Set with SOFT=40, WONK=1 it carries real warmth and a slight hand-cut irregularity, which suits a nostalgic childrenswear brand far better than the usual high-contrast display serifs. Karla — a low-contrast grotesque with faintly odd letterforms. Humane rather than neutral, so it sits beside Fraunces without arguing. */ --font-display: "Fraunces", "Iowan Old Style", "Hoefler Text", Georgia, serif; --font-body: "Karla", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; /* Fluid scale — clamp(min, preferred, max) */ --text-micro: clamp(0.625rem, 0.6rem + 0.12vw, 0.7rem); --text-eyebrow: clamp(0.688rem, 0.66rem + 0.14vw, 0.78rem); --text-sm: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem); --text-base: clamp(0.95rem, 0.92rem + 0.17vw, 1.05rem); --text-lead: clamp(1.06rem, 1rem + 0.3vw, 1.26rem); --text-h3: clamp(1.4rem, 1.24rem + 0.8vw, 1.95rem); --text-h2: clamp(1.95rem, 1.58rem + 1.85vw, 3.2rem); --text-hero: clamp(2.6rem, 1.8rem + 4vw, 5.3rem); --text-numeral: clamp(3.5rem, 2.6rem + 4.4vw, 6.5rem); --leading-tight: 1.02; --leading-snug: 1.16; --leading-body: 1.72; --track-wide: 0.22em; /* eyebrows, nav, small caps */ --track-mid: 0.1em; /* wordmark, buttons */ --track-tight: -0.02em; /* --- Spacing ----------------------------------------------------------- */ --space-2xs: 0.375rem; --space-xs: 0.625rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.25rem; --space-xl: 3.5rem; --space-2xl: 5rem; --space-section: clamp(4.5rem, 2.8rem + 6.8vw, 9.5rem); --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.75rem); --measure: 60ch; /* comfortable reading width */ --width-page: 78rem; --width-narrow: 44rem; /* --- Form -------------------------------------------------------------- */ --radius-sm: 2px; --radius-md: 3px; --border-hair: 1px solid var(--rule); /* --- Elevation --------------------------------------------------------- Warm-tinted shadows — never neutral grey on a cream page. Photographs sit on the page like mounted prints, so shadows stay tight and low. */ --shadow-sm: 0 1px 2px rgba(47, 61, 36, 0.06), 0 2px 6px rgba(47, 61, 36, 0.05); --shadow-md: 0 2px 4px rgba(47, 61, 36, 0.05), 0 10px 24px rgba(47, 61, 36, 0.09); --shadow-lg: 0 4px 10px rgba(47, 61, 36, 0.06), 0 24px 56px rgba(47, 61, 36, 0.14); /* --- Motion ------------------------------------------------------------ */ --duration-fast: 150ms; --duration-normal: 340ms; --duration-slow: 820ms; --duration-draw: 1100ms; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1); /* --- Layering ----------------------------------------------------------- */ --z-botanical: 0; --z-texture: 1; --z-content: 2; --z-header: 50; --z-nav: 60; --z-skip: 100; } /* --- Textures -------------------------------------------------------------- Inlined as data URIs so they cost no extra request. */ :root { /* Linen weave, echoing the logo's backing card. */ --texture-linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"); /* Deckled paper edge, used where one sheet of the album meets the next. */ --edge-deckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='18' preserveAspectRatio='none'%3E%3Cpath d='M0 9 C 40 3, 80 15, 120 8 S 200 2, 240 10 S 320 16, 360 7 S 440 3, 480 11 S 560 15, 600 6 S 680 2, 720 10 S 800 16, 840 8 S 920 3, 960 11 S 1040 15, 1080 7 S 1160 2, 1200 9 L1200 18 L0 18 Z' fill='%23ece5d4'/%3E%3C/svg%3E"); }