/* ============================================================ The Cake Studio — Design Tokens ------------------------------------------------------------ Single source of truth for color, type, spacing, sizing, borders, radius, elevation, motion, z-index. Discipline inherited from the CAKE landing system: - Primitives + semantic aliases - 4px spacing scale - Rectangles square (radius-none); circles for circular semantics - Reduced-motion honored at the token layer - Every color pair audited for WCAG AA Brand pair derived from the Cake Studio logo: - Plum (#6C08A0) — cake mark, structural strength - Pink (#E31782) — wordmark, warmth, accent ============================================================ */ :root { /* ============ COLOR — primitives ============ */ /* Brand */ --color-plum-700: #4A0470; /* hover / footer / strong ink-on-light */ --color-plum-600: #6C08A0; /* primary CTA, headings, brand strong (8.84:1 on white) */ --color-plum-500: #8A1ABE; /* secondary plum */ --color-plum-400: #A855CF; /* lavender — used on dark, decorative */ --color-plum-100: #F5E9F8; /* tint background */ --color-plum-50: #FBF5FC; /* lightest tint */ --color-pink-700: #8E0A4A; --color-pink-600: #B00A5D; /* hover for pink CTAs */ --color-pink-500: #C40B68; /* pink text on white (5.75:1 — AA) */ --color-pink-400: #E31782; /* brand pink (wordmark) — visual mark, large text only */ --color-pink-300: #F25BA0; /* on-dark accent — passes AA (5.85:1) on inverse footer */ --color-pink-100: #FCE5EF; --color-pink-50: #FEF3F8; /* Neutrals — warm bias to read alongside plum/pink without going cold */ --color-ink: #241A1F; /* primary text — warm near-black */ --color-ink-soft: #4D4047; /* secondary text */ --color-muted: #6F6168; /* tertiary text / metadata (≥ 4.5:1 on canvas) */ --color-line: #ECE4E7; /* hairline borders */ --color-line-strong: #C9BCC2; /* stronger dividers */ --color-canvas: #FFFCFB; /* page background — warmer than pure white */ --color-white: #FFFFFF; /* Surfaces — only two non-page levels, by intent */ --color-surface-panel: #FBF5FC; /* plum-tinted panel (heroes, cards) */ --color-surface-warm: #FAF3EF; /* warm panel — for editorial/recipe sections */ --color-surface-inverse: #1A1015; /* footer / inverse */ /* Overlays */ --color-overlay-dark: rgba(36, 26, 31, 0.55); --color-overlay-soft: rgba(36, 26, 31, 0.05); /* Feedback */ --color-success: #137A3A; --color-warning: #A25A00; --color-danger: #B4213F; --color-info: #1E5CB4; /* WhatsApp — platform standard; icon at brand green, text label uses dark variant for AA */ --color-whatsapp: #25D366; --color-whatsapp-hover: #1FB457; --color-whatsapp-dark: #0A3D1A; /* text labels on white pass AA */ /* ============ COLOR — semantic aliases ============ */ --text-primary: var(--color-ink); --text-secondary: var(--color-ink-soft); --text-muted: var(--color-muted); --text-on-accent: var(--color-white); /* white on plum-600 = 8.84:1 */ --text-on-pink: var(--color-white); /* white on pink-500 = 5.59:1 — AA Large; pink-text-button uses dark instead */ --text-on-dark: var(--color-canvas); --text-link: var(--color-plum-600); /* link color — same as accent */ --text-link-hover: var(--color-plum-700); --bg-page: var(--color-canvas); --bg-panel: var(--color-surface-panel); --bg-warm: var(--color-surface-warm); --bg-inverse: var(--color-surface-inverse); --border-subtle: var(--color-line); --border-strong: var(--color-ink); --border-accent: var(--color-plum-600); --accent: var(--color-plum-600); --accent-hover: var(--color-plum-700); --accent-tint: var(--color-plum-100); --accent-secondary: var(--color-pink-500); --accent-secondary-hover:var(--color-pink-600); --accent-on-dark: var(--color-pink-300); /* pink that passes AA on the inverse footer */ --border-input: var(--color-muted); /* form input border — passes 1.4.11 (5.9:1) */ --focus-ring: var(--color-plum-600); /* ============ TYPOGRAPHY ============ */ /* Display: Newsreader (variable serif) — editorial warmth + wedding credibility. Body: Manrope (variable sans) — mobile-legible, contemporary. Logo script is SVG only — never typeset in UI. */ --font-family-display: 'Newsreader', 'Source Serif Pro', Georgia, 'Times New Roman', serif; --font-family-body: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Type scale — semantic. Two ramps: display (serif) and body (sans). */ --font-size-2xs: 11px; /* eyebrows, micro caps */ --font-size-xs: 12px; /* footer-bottom, captions */ --font-size-sm: 13px; /* nav, label UI */ --font-size-base: 14px; /* secondary body, author-name */ --font-size-md: 16px; /* default body — never below this for paragraphs */ --font-size-lg: 18px; /* lead body */ --font-size-xl: 20px; /* small section heads */ --font-size-2xl: 24px; /* card titles */ --font-size-3xl: 28px; /* large card titles */ --font-size-4xl: 34px; /* section heads */ --font-size-5xl: 44px; /* page titles */ --font-size-display: 64px; /* hero display */ --font-size-display-lg: 80px; /* hero display, large viewports */ --line-height-tight: 1.05; --line-height-snug: 1.15; --line-height-cozy: 1.3; --line-height-normal: 1.45; --line-height-relaxed: 1.6; /* default body */ --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* button labels */ --tracking-widest: 0.14em; /* eyebrows */ --tracking-allcaps: 0.16em; /* rail labels, micro caps */ /* ============ SPACING — 4px base ============ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-12: 56px; --space-14: 64px; --space-16: 80px; --space-20: 96px; --space-24: 120px; /* ============ LAYOUT ============ */ --container-max: 1200px; --container-narrow: 720px; --container-pad: var(--space-6); /* 24px */ --header-height: 88px; /* fits the 56px logo with breathing room */ --section-pad-y: var(--space-16); /* 80px */ --section-pad-y-tight: var(--space-12); /* 56px */ --section-pad-y-loose: var(--space-20); /* 96px */ --section-gap: var(--space-4); /* ============ SIZING — interactive controls ============ */ --control-size-xs: 36px; --control-size-sm: 40px; --control-size-md: 44px; /* WCAG AA touch target */ --control-size-lg: 64px; /* play button, large icon controls */ --avatar-size: 44px; /* ============ BORDERS ============ */ --border-width-thin: 1px; --border-width-thick: 2px; /* ============ RADII ============ */ --radius-none: 0; /* DEFAULT for all rectangles */ --radius-circle: 50%; /* circular icon controls, avatars, badges */ --radius-pill: 999px; /* reserved — chip variant only */ /* ============ ELEVATION ============ */ /* Used only on product/cake imagery and elevated overlays — never on flat surfaces. */ --shadow-product: 0 14px 18px rgba(36, 26, 31, 0.10); --shadow-product-lg: 0 22px 32px rgba(36, 26, 31, 0.12); --shadow-overlay: 0 8px 24px rgba(36, 26, 31, 0.18); /* ============ MOTION ============ */ --duration-fast: 150ms; --duration-base: 220ms; --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); /* ============ Z-INDEX ============ */ --z-base: 0; --z-stack: 2; --z-overlay: 5; --z-sticky: 50; --z-drawer: 80; --z-modal: 100; --z-fab: 90; } /* ============ Reduced motion ============ */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }