/* ===== Fonts loaded via Google Fonts in ===== */ /* Playfair Display — romantic editorial serif (headings) */ /* Plus Jakarta Sans — modern friendly sans (body) */ /* Dancing Script — beautiful cursive (accent moments) */ /* ===== Design tokens ===== */ :root { /* ── Brand (spec) ── */ --brand: #779ecc; --brand-dark: #5580a8; --brand-darker: #3d6190; --brand-soft: #eef4fb; --brand-mist: #f4f8ff; /* ── Accent (spec) ── */ --accent: #FFD166; --accent-dark: #e6b827; --accent-darker:#c49a08; --accent-soft: #fff8e1; /* ── Status (spec) ── */ --success: #10B981; --success-soft: #d1fae5; /* ── Surfaces (spec) ── */ --bg: #FFFFFF; --surface: #F8FAFC; --surface-2: #F1F5F9; /* ── Borders (spec) ── */ --border: #E2E8F0; --border-soft: #F1F5F9; /* ── Text (spec) ── */ --text: #0F172A; --text-2: #475569; --text-3: #94A3B8; /* ── Typography ── */ --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-display: 'Playfair Display', Georgia, serif; --font-accent: 'Dancing Script', Georgia, cursive; /* ── Type scale (fluid) ── */ --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-base: 1.0625rem; --fs-lg: clamp(1.125rem, 1rem + .4vw, 1.25rem); --fs-xl: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); --fs-2xl: clamp(1.875rem, 1.3rem + 2.5vw, 3rem); --fs-3xl: clamp(2.5rem, 1.5rem + 5vw, 5rem); /* ── Spacing (8px grid) ── */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px; /* ── Border radius (playful, rounded) ── */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px; --r-full: 999px; /* ── Shadows ── */ --sh-xs: 0 1px 2px rgba(0,0,0,.05); --sh-sm: 0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05); --sh-md: 0 4px 20px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.04); --sh-lg: 0 12px 48px rgba(0,0,0,.09), 0 32px 80px rgba(0,0,0,.05); --sh-xl: 0 24px 64px rgba(0,0,0,.10), 0 48px 100px rgba(0,0,0,.06); --sh-brand: 0 8px 32px rgba(119,158,204,.38); --sh-accent:0 8px 32px rgba(255,209,102,.45); /* ── Motion ── */ --ease: cubic-bezier(.22,.61,.36,1); --ease-spring: cubic-bezier(.34,1.4,.64,1); --ease-out: cubic-bezier(0,0,.2,1); --t-fast: 150ms; --t-base: 250ms; --t-slow: 400ms; /* ── Layout ── */ --max: 1200px; --gutter: clamp(20px, 5vw, 64px); } html { font-size: 16px; }