/* ============================================================================= PEARL VEIL — DESIGN TOKENS ───────────────────────────────────────────────────────────────────────────── This is the single source of truth for all visual design values. TO REPLACE BRAND COLORS: Edit the values in the "Brand Colors" section. TO REPLACE FONTS: Edit the --font-* variables and update base.css imports. TO ADJUST SPACING: Modify the spacing scale below. All other CSS files reference these variables — change here, updates everywhere. ============================================================================= */ :root { /* ─── BRAND COLORS ────────────────────────────────────────────────────────── Replace these when your final brand colors are confirmed. Current palette: Ivory + Warm Pearl Gold + Deep Onyx --------------------------------------------------------------------------- */ --brand-primary: #C4A882; /* Pearl Gold — main accent color */ --brand-primary-light: #D4BDA0; /* Lighter accent — hover states */ --brand-primary-pale: #EDE4D8; /* Pale accent — subtle fills, tags */ --brand-primary-dark: #A8896A; /* Darker accent — active/pressed states */ --brand-dark: #1A1A1A; /* Deep Onyx — headings, primary text */ --brand-footer: #141414; /* Footer background */ /* ─── NEUTRALS ───────────────────────────────────────────────────────────── */ --color-ivory: #F8F5F0; /* Page background */ --color-ivory-alt: #F0EBE3; /* Alternate section background */ --color-ivory-border: #E8DFD4; /* Borders, dividers, subtle lines */ --color-text-primary: #1A1A1A; /* Headings, bold text */ --color-text-body: #3D3D3D; /* Body copy */ --color-text-muted: #6B6B6B; /* Secondary text, descriptions */ --color-text-faint: #9A9A9A; /* Captions, metadata, placeholders */ --color-white: #FFFFFF; /* ─── SEMANTIC COLORS ─────────────────────────────────────────────────────── */ --color-success: #3D7A55; --color-success-bg: #EDF7F2; --color-warning: #A07820; --color-warning-bg: #FEF8EC; --color-error: #8B2E2E; --color-error-bg: #FDEEEE; --color-info: #2E5F8B; --color-info-bg: #EEF4FC; /* ─── SEMANTIC ALIASES ────────────────────────────────────────────────────── These are what components actually use. Swap themes by redefining these. --------------------------------------------------------------------------- */ --color-bg: var(--color-ivory); --color-bg-alt: var(--color-ivory-alt); --color-border: var(--color-ivory-border); --color-surface: var(--color-white); --color-accent: var(--brand-primary); --color-accent-hover: var(--brand-primary-light); --color-accent-pale: var(--brand-primary-pale); --color-accent-dark: var(--brand-primary-dark); --color-heading: var(--color-text-primary); --color-body: var(--color-text-body); --color-muted: var(--color-text-muted); --color-faint: var(--color-text-faint); /* Announcement bar */ --color-announcement-bg: #1A1A1A; --color-announcement-text: var(--brand-primary); /* ─── TYPOGRAPHY ───────────────────────────────────────────────────────────── REPLACE FONTS: Change the font-family values below and update @import in base.css --------------------------------------------------------------------------- */ --font-display: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif; --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Courier New', Courier, monospace; /* Type scale — fluid from mobile to desktop */ --text-xs: 0.6875rem; /* 11px — legal, fine print */ --text-sm: 0.8125rem; /* 13px — captions, labels, badges */ --text-base: 1rem; /* 16px — body copy */ --text-md: 1.125rem; /* 18px — lead paragraphs */ --text-lg: 1.25rem; /* 20px — small headings */ --text-xl: 1.5rem; /* 24px — card headings */ --text-2xl: 2rem; /* 32px — section headings */ --text-3xl: 2.75rem; /* 44px — page headings */ --text-4xl: 3.75rem; /* 60px — hero headings desktop */ --text-5xl: 5.5rem; /* 88px — large editorial hero */ /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.55; --leading-relaxed: 1.75; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.06em; --tracking-wider: 0.12em; --tracking-widest: 0.22em; /* ─── SPACING SCALE ───────────────────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* Section vertical rhythm */ --section-gap: clamp(4rem, 8vw, 7rem); /* ─── LAYOUT ───────────────────────────────────────────────────────────────── */ --container-max: 1320px; --container-padding: clamp(1.25rem, 5vw, 3rem); /* ─── BORDERS & RADIUS ─────────────────────────────────────────────────────── */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ─── SHADOWS ──────────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 3px rgba(26, 26, 26, 0.06); --shadow-sm: 0 2px 10px rgba(26, 26, 26, 0.08); --shadow-md: 0 6px 24px rgba(26, 26, 26, 0.10); --shadow-lg: 0 12px 48px rgba(26, 26, 26, 0.12); --shadow-xl: 0 24px 80px rgba(26, 26, 26, 0.16); --shadow-accent: 0 4px 24px rgba(196, 168, 130, 0.30); /* ─── TRANSITIONS & EASING ─────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-slower: 600ms; --transition-base: all var(--dur-base) var(--ease-out); --transition-fast: all var(--dur-fast) var(--ease-out); --transition-color: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); /* ─── Z-INDEX ───────────────────────────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ─── COMPONENT DIMENSIONS ─────────────────────────────────────────────────── */ --announcement-height: 40px; --nav-height: 72px; --nav-height-compact: 60px; --btn-height: 50px; --btn-height-sm: 40px; --btn-height-lg: 58px; --btn-padding-x: 2rem; --btn-padding-x-sm: 1.25rem; --btn-radius: var(--radius-sm); --btn-font: var(--text-sm); --btn-tracking: var(--tracking-widest); --btn-weight: var(--weight-medium); --input-height: 52px; --input-padding-x: var(--space-4); --input-radius: var(--radius-sm); --input-font: var(--text-base); --card-radius: var(--radius-md); --card-padding: var(--space-6); } /* ============================================================================= DARK MODE Applied when Override semantic aliases only — component styles update automatically. ============================================================================= */ [data-theme="dark"] { --color-bg: #0F0F0F; --color-bg-alt: #171717; --color-border: #2A2A2A; --color-surface: #1A1A1A; --color-heading: #F0EBE3; --color-body: #C8C0B8; --color-muted: #8A8A8A; --color-faint: #5A5A5A; --color-ivory: #0F0F0F; --color-ivory-alt: #171717; --color-ivory-border: #2A2A2A; --color-white: #1A1A1A; --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.40); --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.50); --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.60); }