/* ========================================================================== Demo Design System v1 — tokens Every value a demo can vary lives here. Components only read var(--*). A demo picks ONE theme via . No other overrides. ========================================================================== */ :root { /* --- Scale (shared by all themes) --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1.0625rem; --text-lg: 1.25rem; --text-xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); --text-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); --text-3xl: clamp(2.25rem, 1.5rem + 3.5vw, 4rem); --leading-tight: 1.1; --leading-snug: 1.3; --leading-body: 1.65; --container: 72rem; --container-narrow: 44rem; --gutter: clamp(1rem, 4vw, 2rem); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.08); --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.05); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* --- Theme: modern (default) — professional services, tech, general --- */ --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --heading-weight: 700; --heading-tracking: -0.02em; --color-bg: #ffffff; --color-surface: #f5f7fa; --color-surface-2: #e9edf3; --color-text: #111827; --color-muted: #4b5563; --color-border: #d9dee7; --color-primary: #1f4fd8; --color-primary-hover: #183fb0; --color-on-primary: #ffffff; --color-accent: #0ea5a4; --color-hero-bg: #0f172a; --color-hero-text: #f8fafc; --color-hero-muted: #cbd5e1; --color-hero-accent: #2dd4bf; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-btn: 999px; } /* --- Theme: classic — restaurants, bakeries, cafes, family businesses --- */ [data-theme="classic"] { --font-heading: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Source Sans 3", system-ui, sans-serif; --heading-weight: 600; --heading-tracking: -0.01em; --color-bg: #fffaf3; --color-surface: #f6ecdd; --color-surface-2: #eddcc4; --color-text: #2b1d14; --color-muted: #6b5344; --color-border: #e2cfb4; --color-primary: #9c2f1f; --color-primary-hover: #7e2517; --color-on-primary: #fffaf3; --color-accent: #c98a2b; --color-hero-bg: #2b1d14; --color-hero-text: #fffaf3; --color-hero-muted: #e2cfb4; --color-hero-accent: #e0a547; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-btn: 6px; } /* --- Theme: trade — plumbers, electricians, contractors, auto, landscaping --- */ [data-theme="trade"] { --font-heading: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; --heading-weight: 800; --heading-tracking: -0.015em; --color-bg: #ffffff; --color-surface: #f2f4f7; --color-surface-2: #e3e7ed; --color-text: #0d1b2a; --color-muted: #475467; --color-border: #d0d5dd; --color-primary: #e8590c; --color-primary-hover: #c44a08; --color-on-primary: #ffffff; --color-accent: #1b3a5c; --color-hero-bg: #0d1b2a; --color-hero-text: #ffffff; --color-hero-muted: #b7c4d4; --color-hero-accent: #ff8a3d; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-btn: 4px; } /* --- Theme: fresh — salons, spas, wellness, cleaning, pet care, florists --- */ [data-theme="fresh"] { --font-heading: "DM Serif Display", Georgia, serif; --font-body: "DM Sans", system-ui, sans-serif; --heading-weight: 400; --heading-tracking: 0; --color-bg: #fbfcfa; --color-surface: #eef3ee; --color-surface-2: #dfe9e0; --color-text: #1d2a24; --color-muted: #52635a; --color-border: #d3dfd5; --color-primary: #2f6b55; --color-primary-hover: #245545; --color-on-primary: #ffffff; --color-accent: #d98c7a; --color-hero-bg: #e5eee6; --color-hero-text: #1d2a24; --color-hero-muted: #52635a; --color-hero-accent: #b4604e; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 28px; --radius-btn: 999px; }