/** * Design Tokens - Wedding Website * Single source of truth for colors, spacing, typography, and other design values * * Usage: var(--brand-rose), var(--space-lg), etc. */ :root { /* ======================================== PRIMARY BRAND COLORS ======================================== */ --brand-rose: #d4769b; /* Main pink/rose for headings, accents */ --brand-rose-dark: #c26688; /* Darker variant for hover states */ --brand-rose-light: #e8a5b0; /* Lighter variant for subtle accents, borders */ --brand-olive: #6b8e76; /* Main olive green for headings */ --brand-olive-dark: #55614a; /* Darker olive for emphasis */ --brand-olive-light: #8ba474; /* Lighter olive for labels, strokes */ /* Tan/Brown color family */ --color-tan: #bfa37a; /* Primary tan for accents, labels */ --color-tan-dark: #8b7355; /* Darker tan for links, emphasis, brown headings */ --color-tan-light: #d4c5a8; /* Lighter tan for subtle borders */ /* Additional accent colors */ --color-sage: #8bab9d; /* Sage green for badges, sections */ --color-sage-light: #b8cec5; /* Lighter sage for subtle backgrounds */ --color-rose-muted: #8b5559; /* Muted rose for secondary links */ --color-gold: #d4af37; /* Gold for special highlights */ --color-gold-light: #f5e5b8; /* Lighter gold for subtle backgrounds */ /* ======================================== NEUTRAL COLORS ======================================== */ --color-cream: #f7f4ed; /* Background base */ --color-cream-light: #faf9f7; /* Lighter cream background */ --color-ink: #2d2d2d; /* Primary text color */ --color-ink-90: rgba(45, 45, 45, 0.9); /* 90% opacity text */ --color-ink-80: rgba(45, 45, 45, 0.82); /* Secondary text */ --color-ink-60: rgba(45, 45, 45, 0.6); /* Tertiary text */ --color-text-muted: #5a5446; /* Subtle text on light backgrounds */ --color-text-light: #999; /* Light gray text, placeholders */ --color-gray-dark: #4a4a4a; /* Darker gray for headings */ /* ======================================== BACKGROUND TINTS ======================================== */ --bg-card-cream: rgba(255, 240, 245, 0.95); /* Login card background */ --bg-card-green: rgba(245, 250, 240, 0.75); /* Info notice boxes */ --bg-white-soft: rgba(255, 255, 255, 0.85); /* Content cards */ --bg-white-90: rgba(255, 255, 255, 0.9); /* 90% white overlay */ --bg-white-50: rgba(255, 255, 255, 0.5); /* 50% white overlay */ --bg-white-20: rgba(255, 255, 255, 0.2); /* 20% white overlay */ --bg-white: #ffffff; /* Pure white backgrounds */ --bg-overlay: rgba(179, 179, 179, 0.18); /* Background overlay/blur */ /* Form backgrounds */ --bg-input: #ffffff; /* Input field background */ --bg-input-focus: #ffffff; /* Input on focus */ /* State backgrounds */ --bg-error: rgba(255, 230, 230, 0.85); /* Error message background */ --bg-success: rgba(230, 255, 230, 0.85); /* Success message background */ /* ======================================== BORDER COLORS Note: Using color tokens with opacity for maintainability ======================================== */ --border-soft: color-mix(in srgb, var(--brand-olive-light) 35%, transparent); /* Standard border */ --border-lighter: color-mix(in srgb, var(--color-tan) 28%, transparent); /* Lighter variant */ --border-dashed: color-mix(in srgb, var(--brand-rose-light) 30%, transparent); /* Form section borders */ --border-input: #dcd8d1; /* Input field borders */ --border-input-focus: var(--brand-rose); /* Input focus border */ /* ======================================== STATE COLORS ======================================== */ --color-error: #d9534f; /* Error text, required indicators */ --color-error-dark: #b04a4a; /* Darker error (buttons, etc.) */ --color-error-bg: #fdecec; /* Error background */ /* Link colors */ --color-link: var(--brand-rose); /* Primary links */ --color-link-hover: var(--brand-rose-dark); /* Link hover state */ /* ======================================== SPACING SCALE ======================================== */ --space-2xs: 0.25rem; /* 4px - Tiny gaps, decorative elements */ --space-xs: 0.375rem; /* 6px - Field gaps, tight spacing */ --space-sm: 0.75rem; /* 12px - Small gaps */ --space-base: 0.875rem; /* 14px - Form inputs, buttons */ --space-md: 1rem; /* 16px - Base spacing */ --space-lg-sm: 1.25rem; /* 20px - Between medium and large */ --space-lg: 1.5rem; /* 24px - Section padding */ --space-xl: 2rem; /* 32px - Large margins */ --space-2xl: 3rem; /* 48px - Major sections */ /* ======================================== TYPOGRAPHY SCALE ======================================== */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.8125rem; /* 13px */ --font-size-base: 0.875rem; /* 14px */ --font-size-md: 0.9375rem; /* 15px */ --font-size-lg: 1rem; /* 16px */ --font-size-xl: 1.125rem; /* 18px */ --font-size-2xl: 1.25rem; /* 20px */ --font-size-3xl: 1.375rem; /* 22px */ --font-size-4xl: 1.625rem; /* 26px */ --font-size-5xl: 2rem; /* 32px */ --font-size-6xl: 2.5rem; /* 40px */ --font-size-7xl: 4rem; /* 64px */ --font-size-8xl: 6rem; /* 96px */ /* ======================================== FONT FAMILIES ======================================== */ --font-script: 'Great Vibes', cursive; --font-serif: 'Cormorant Garamond', serif; --font-display: 'Playfair Display', serif; --font-sans: 'Inter', sans-serif; /* ======================================== FONT WEIGHTS ======================================== */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; /* ======================================== BORDER RADIUS ======================================== */ --radius-xs: 4px; /* Small buttons, tight elements */ --radius-sm: 8px; /* Inputs, small elements */ --radius-md: 12px; /* Cards, containers */ --radius-lg: 16px; /* Large containers */ --radius-xl: 18px; /* Hero sections, major containers */ --radius-2xl: 20px; /* Badges, pills, special elements */ --radius-round: 50%; /* Circular elements */ /* ======================================== SHADOWS ======================================== */ --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-sm: 0 2px 8px rgba(107, 142, 118, 0.12); --shadow-md: 0 8px 24px rgba(20, 20, 20, 0.07); --shadow-lg: 0 12px 36px rgba(20, 20, 20, 0.10); /* Specific shadows */ --shadow-card: 0 8px 24px rgba(20, 20, 20, 0.12); --shadow-button-hover: 0 4px 12px rgba(192, 138, 142, 0.3); --shadow-input-focus: 0 0 0 3px rgba(192, 138, 142, 0.15); --shadow-error-focus: 0 0 0 3px rgba(176, 74, 74, 0.15); --shadow-tooltip: 0 4px 12px rgba(0, 0, 0, 0.2); /* ======================================== OPACITY SCALE ======================================== */ --opacity-10: 0.10; --opacity-15: 0.15; --opacity-20: 0.20; --opacity-30: 0.30; --opacity-40: 0.40; --opacity-50: 0.50; --opacity-60: 0.60; --opacity-75: 0.75; --opacity-80: 0.80; --opacity-85: 0.85; --opacity-90: 0.90; --opacity-95: 0.95; /* ======================================== COMPONENT-SPECIFIC TOKENS ======================================== */ --control-height: 40px; /* Standard input/button height */ --emblem-size: 73px; /* Wedding emblem dimensions */ --help-icon-size: 20px; /* Help/info icon size */ /* ======================================== TRANSITIONS ======================================== */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; /* ======================================== Z-INDEX SCALE ======================================== */ --z-base: 1; --z-overlay: 10; --z-modal: 100; --z-tooltip: 1000; --z-notification: 2000; }