/*
True Friend Matrimony — Mockup Design Tokens (v3 — restored to the real
brand palette, verified against the actual logo file at
assets/img/logo.png: overlapping diamonds in a purple-to-wine gradient,
navy wordmark. This replaces the v2 maroon/gold palette, which was
sampled from a client-supplied AI-generated reference image rather than
the real logo — that reference was useful for layout, not color.
---------------------------------------------------------------------
Fonts are loaded via a tag in each page's , not via @import
(avoids the render-blocking penalty of an in-CSS @import). Put this exact
tag at the top of , before this stylesheet:
Token naming:
--color-* brand + neutral colors (base + derived tonal variants)
--gradient-* reserved hero/CTA gradients
--font-* font-family stacks
--text-* fluid clamp() type scale
--space-* 8px base spacing scale
--radius-* corner radius scale
--shadow-* 4-level elevation scale
--ease-* motion easing curve
--duration-* motion duration tokens
All color values below are plain literal hex/rgba (NOT CSS relative-color
syntax oklch(from ...)) — that syntax silently fails to nothing in a
meaningful slice of real-world rendering contexts, which was the root
cause of an earlier color mismatch. Every derived shade here was still
computed analytically from the two base brand colors, never invented.
*/
:root {
/* ---------- Brand colors — sampled directly from the real logo
(assets/img/logo.png: diamond mark gradient + navy wordmark) ---------- */
--color-primary: #5c288a; /* purple — logo mark, buttons, icon circles */
--color-primary-dark: #421c66; /* deeper purple — top bar, footer, deep panels */
--color-accent: #9c295e; /* wine — logo "MATRIMONY" wordmark, highlights */
--color-text: #1e2235; /* navy — matches the logo's "TRUE FRIEND" text */
/* ---------- Derived tonal variants ---------- */
--color-primary-hover: #4f2178;
--color-primary-active: #421c66;
--color-primary-light: #a688c4;
--color-primary-tint: #f1e9f8;
--color-accent-hover: #841f4e;
--color-accent-active: #6c1940;
--color-accent-light: #c97a9c;
--color-accent-tint: #f9e9f0;
--color-text-muted: #5b5568;
--color-text-subtle: #8b8695;
--color-text-on-dark: #f0eaf5;
/* ---------- Neutrals / surfaces (warm off-white / lavender-tinted family) ---------- */
--color-surface: #fdfaf7;
--color-surface-alt: #f6f1f9;
--color-surface-raised: #ffffff;
--color-surface-sunken: #efe6e0;
--color-border: #e6e0ea;
--color-border-strong: #d2c4da;
--color-white: #ffffff;
--color-overlay: rgba(92, 40, 138, 0.55); /* = --color-primary at 55% */
/* ---------- Feedback colors ---------- */
--color-success: #3f7d4f;
--color-error: #b3423a;
/* ---------- Gradients (reserved for hero / CTA moments only) ---------- */
--gradient-primary: linear-gradient(135deg, #5c288a 0%, #421c66 100%);
--gradient-gold: linear-gradient(135deg, #b5568a 0%, #9c295e 100%); /* kept as a name for back-compat; now a wine gradient, not gold */
/* ---------- Type families ---------- */
--font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
--font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
--font-accent: 'Cormorant Garamond', 'Times New Roman', serif; /* italic pull-quotes/testimonials ONLY */
/* ---------- Fluid type scale ---------- */
--text-label: clamp(0.72rem, 0.69rem + 0.15vw, 0.8rem);
--text-xs: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
--text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--text-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.3rem);
--text-lg: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
--text-xl: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
--text-2xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
--text-3xl: clamp(2.5rem, 2rem + 2.5vw, 3.75rem);
--text-4xl: clamp(3rem, 2.3rem + 3.5vw, 4.75rem);
--text-display: clamp(3.5rem, 2.6rem + 4.5vw, 6rem);
/* ---------- Spacing (8px base grid) ---------- */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 48px;
--space-6: 64px;
--space-7: 96px;
/* ---------- Radius ---------- */
--radius-sm: 8px; /* inputs, buttons */
--radius-md: 12px; /* small cards */
--radius-lg: 16px; /* cards, panels */
--radius-xl: 28px; /* large photo/panel blocks */
--radius-pill: 999px; /* badges, primary CTAs */
/* ---------- Elevation (soft, layered, low-opacity, purple-tinted) ---------- */
--shadow-1: 0 1px 2px rgba(66, 28, 102, 0.06), 0 1px 1px rgba(66, 28, 102, 0.04);
--shadow-2: 0 4px 10px rgba(66, 28, 102, 0.08), 0 2px 4px rgba(66, 28, 102, 0.05);
--shadow-3: 0 12px 24px rgba(66, 28, 102, 0.10), 0 4px 8px rgba(66, 28, 102, 0.06);
--shadow-4: 0 24px 48px rgba(66, 28, 102, 0.16), 0 8px 16px rgba(66, 28, 102, 0.08);
/* ---------- Motion ---------- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--duration-fast: 220ms;
--duration-base: 300ms;
--duration-slow: 550ms;
}