/* ────────────────────────────────────────────────────────────── Dine Local — Design Tokens CSS custom properties for colours, typography, spacing, breakpoints. Loaded after critical CSS (inlined in ), before base.css. ────────────────────────────────────────────────────────────── */ :root { /* ── Colours ─────────────────────────────────────────────── */ --color-primary: #ff5900; --color-primary-dark: #cc4700; --color-primary-light: #ff8c47; --color-primary-tint: #fff0e6; --color-ink: #1a1a1a; --color-body: #3d3d3d; --color-muted: #6b6b6b; --color-bg: #ffffff; --color-bg-warm:#f7f7f5; --color-border: #e5e5e0; --color-success: #1a7f37; --color-warning: #b54708; --color-error: #cf222e; --color-white: #ffffff; /* ── Typography ──────────────────────────────────────────── */ --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem); /* 12–13px */ --text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem); /* 14–15px */ --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); /* 16–17px */ --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); /* 18–20px */ --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20–24px */ --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); /* 24–30px */ --text-3xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.5rem); /* 30–40px */ --text-display: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem); /* 36–56px */ --leading-tight: 1.15; --leading-normal: 1.5; --leading-loose: 1.7; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Spacing (8px base grid) ────────────────────────────── */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 128px; /* ── Layout ─────────────────────────────────────────────── */ --container-max: 1200px; --reading-width: 680px; --border-radius: 8px; --border-radius-lg:12px; /* ── Transitions ────────────────────────────────────────── */ --transition-fast: 150ms ease; --transition-base: 200ms ease; /* ── Breakpoints (for reference — use in media queries) ── */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1200px; }