/* ========================================================================== Forever Florals — Design Tokens (v3 — peach/orange led) Palette taken from Talyssa's swatch sheet. Pink is deliberately NOT the brand colour: most floral preservation businesses lead with pink, and the point here is to stand apart. Peach/orange leads, with lilac, periwinkle and sky blue as the major secondaries — which also echoes the saturated orange reference site she chose. Rose/blossom tones survive only as small accents, never as a lead. CONTRAST — measured, WCAG 2.1: ink on paper .......... 13.88 paper on ink ......... 13.88 white on terracotta .... 4.84 terracotta on paper .. 4.59 (AA body) white on plum .......... 7.96 ink on peach ......... 6.11 ink on apricot ......... 11.69 ink on periwinkle .... 9.19 ink on sky ............. 8.92 ink on sage .......... 9.53 ink on golden .......... 8.56 ink on lilac ......... 5.01 ink on mauve ........... 7.04 ink on cream ......... 11.25 LARGE-TEXT ONLY — never use as a body-copy ground: clay-red (3.75) and rose (3.80). Accents and headings only. ========================================================================== */ :root { /* ---- Ink & paper ---- */ --ink: #33223B; /* deep aubergine — never pure black */ --ink-soft: #6B5570; /* secondary copy */ --paper: #FDF8F2; /* warm off-white */ --paper-pure: #FFFFFF; /* ---- The lead: peach / orange ---- */ --terracotta: #B85427; /* PRIMARY — buttons, links, accents */ --rust: #A8481D; /* primary hover / deeper ground */ --peach: #E8926B; --orange: #EE9053; --apricot: #FCE3B0; --golden: #F0C020; /* ---- Secondaries: lilac / blue ---- */ --lilac: #A98BC4; --lilac-soft: #B193B9; /* scrolled header bar — carries INK text (5.40), never white (2.71, fails) */ --plum: #654570; /* deep — carries paper text */ --periwinkle: #CECEE8; /* ink 9.51, eyebrow at 72% opacity 4.69 */ --sky: #B6D0E7; /* ink 9.19, eyebrow at 72% opacity 4.61 */ --blue-deep: #45688C; /* ---- Support ---- */ --sage: #C9D6A6; --sage-soft: #D6D9AE; /* section ground — ink 10.05, ink-soft 4.56 */ --sage-deep: #5F7A3C; /* tick icons — needs the extra depth */ --rose-mid: #D57173; /* section ground. CAUTION: mid-luminance, so neither white (3.09) nor ink (4.49) reaches AA body on it. See style.css note. */ --cream: #EAE0D5; --mauve: #CFA9C0; /* used sparingly */ --clay-red: #CC5F60; /* LARGE TEXT ONLY */ --rose: #D8556E; /* LARGE TEXT ONLY */ --blossom: #F5C3CE; /* smallest of accents — not a brand colour */ /* ---- Tints — large calm fields ---- */ --peach-tint: #FBE7DA; --honey-tint: #FFE4B5; /* ink 11.88, ink-soft 5.39 — both AA body */ --apricot-mid: #ECA27D; /* ink 7.00 — needs caption opacity >= 0.8 */ --sand-tint: #EFE2D2; /* ink 11.50, ink-soft 5.22 — both AA body */ --golden-tint: #FCF0CE; --lilac-tint: #EFE8F5; --sky-tint: #E8F1F8; --sage-tint: #EDF2E0; /* ====================================================================== SEMANTIC TOKENS ====================================================================== */ --color-background: var(--paper); --color-surface: var(--paper-pure); --color-foreground: var(--ink); --color-foreground-muted: var(--ink-soft); --color-primary: var(--terracotta); --color-on-primary: var(--paper); --color-accent: var(--terracotta); --color-on-accent: var(--paper-pure); --color-border: rgba(51, 34, 59, 0.14); --color-border-strong: rgba(51, 34, 59, 0.30); --color-ring: var(--terracotta); --color-scrim: rgba(51, 34, 59, 0.72); /* ---- Typography ---- */ --font-display: 'Bodoni Moda', 'Didot', 'Times New Roman', Georgia, serif; --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0625rem; --text-lg: 1.1875rem; --text-xl: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem); --text-2xl: clamp(1.6rem, 1.35rem + 1.3vw, 2.4rem); --text-3xl: clamp(2.1rem, 1.6rem + 2.6vw, 3.5rem); --text-4xl: clamp(2.6rem, 1.7rem + 4.4vw, 5.5rem); --text-5xl: clamp(3.2rem, 1.8rem + 7vw, 9rem); --text-mega: clamp(3.6rem, 1.2rem + 12vw, 15rem); /* Display headings sit between 4xl and 5xl — the big editorial look, eased back to about 83% of where it started. Deliberately its own token rather than a scale rung, so it can be nudged without disturbing the scale. */ --text-display: clamp(2.9rem, 1.7rem + 5.9vw, 7.5rem); --text-display-mega: clamp(3.2rem, 1.1rem + 10vw, 12.5rem); --leading-mega: 0.86; --leading-tight: 1.02; --leading-snug: 1.18; --leading-normal: 1.55; --leading-relaxed: 1.72; --tracking-mega: -0.02em; --tracking-label: 0.22em; --tracking-wide: 0.1em; /* ---- Spacing ---- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem; --section-y: clamp(3.5rem, 2.5rem + 5vw, 8rem); --section-y-tight: clamp(2.25rem, 1.75rem + 2.5vw, 4.5rem); --gutter: clamp(1.25rem, 0.75rem + 2.6vw, 4rem); /* ---- Layout ---- */ --container: 78rem; --container-wide: 94rem; --container-text: 36rem; --container-narrow: 46rem; /* ---- Shape ---- */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 14px; --radius-pill: 999px; /* One large value, not an explicit vertical percentage: the browser clamps the horizontal radii to half the width and scales the vertical radii by the same factor, giving a TRUE semicircular top rather than a stretched ellipse. Must stay in step with .duo__arch. */ --radius-arch: 999px 999px 0 0; --radius-oval: 50%; /* ---- Elevation ---- */ --shadow-sm: 0 1px 3px rgba(51, 34, 59, 0.07); --shadow-md: 0 6px 22px rgba(51, 34, 59, 0.11); --shadow-lg: 0 18px 52px rgba(51, 34, 59, 0.17); /* ---- Motion ---- */ --dur-fast: 150ms; --dur-base: 260ms; --dur-slow: 520ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* ---- Z-index ---- */ --z-base: 0; --z-raised: 10; --z-header: 40; --z-topbar: 50; /* above the header, which docks beneath it */ --z-overlay: 100; --z-modal: 200; }