/* * Takeaway Theme design tokens (v0.3.0) * ------------------------------------ * Fallback values only. When Takeaway OS is active it prints the live brand * tokens inline in (style#takeaway-os-brand) AFTER stylesheets, so the * plugin values win. These fallbacks keep the theme presentable if the plugin * is deactivated. * * Breakpoints used across theme CSS (CSS variables cannot hold media queries): * - 620px : small phones / single column grids * - 720px : large phones * - 900px : tablet / nav collapse * - 1120px : content container max width */ :root { /* * Default preset: warm-neutral takeaway. * Keep semantic tokens separate from legacy aliases so future presets can * swap the look without forcing a template rewrite. */ /* Semantic colour system */ --tt-color-primary-500: #d44a27; --tt-color-primary-600: #b93a19; --tt-color-accent-500: #c79a33; --tt-color-canvas: #f7f1e8; --tt-color-canvas-alt: #f2e9dd; --tt-color-surface: #fffdfa; --tt-color-surface-soft: #fbf6ee; --tt-color-surface-muted: #f0e4d4; --tt-color-text-strong: #35271d; --tt-color-text: #46362b; --tt-color-text-soft: #6a5a4e; --tt-color-border: #e2d3bf; --tt-color-border-strong: #c6b19a; --tt-color-success: #2f7e48; --tt-color-warning: #9b680d; --tt-color-error: #b6412a; /* Theme aliases used across templates and Woo surfaces */ --tt-primary: var(--tt-color-primary-500); --tt-primary-hover: var(--tt-color-primary-600); --tt-accent: var(--tt-color-accent-500); --tt-bg: var(--tt-color-canvas); --tt-surface: var(--tt-color-surface); --tt-surface-soft: var(--tt-color-surface-soft); --tt-surface-muted: var(--tt-color-surface-muted); --tt-text: var(--tt-color-text-strong); --tt-text-body: var(--tt-color-text); --tt-muted: var(--tt-color-text-soft); --tt-border: var(--tt-color-border); --tt-border-strong: var(--tt-color-border-strong); --tt-success: var(--tt-color-success); --tt-warning: var(--tt-color-warning); --tt-error: var(--tt-color-error); --tt-border-input: var(--tt-color-border-strong); /* Legacy aliases (v0.2.x CSS still reads these) */ --tt-secondary: var(--tt-accent); --tt-dark: var(--tt-color-text-strong); --tt-cream: var(--tt-color-canvas); --tt-cream2: var(--tt-color-canvas-alt); /* Shape and depth */ --tt-radius-xs: 12px; --tt-radius-sm: 16px; --tt-radius-md: 20px; --tt-radius-lg: 28px; --tt-radius-xl: 34px; --tt-radius-full: 999px; --tt-shadow-xs: 0 2px 8px rgba(53, 39, 29, .04); --tt-shadow-sm: 0 10px 24px rgba(53, 39, 29, .06); --tt-shadow-md: 0 16px 40px rgba(53, 39, 29, .08); --tt-shadow-lg: 0 24px 56px rgba(53, 39, 29, .1); --tt-shadow: var(--tt-shadow-md); /* Typography */ --tt-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --tt-font-heading: var(--tt-font); --tt-font-body: var(--tt-font); --tt-text-xs: .75rem; --tt-text-sm: .875rem; --tt-text-base: 1rem; --tt-text-lg: 1.125rem; --tt-text-xl: 1.375rem; --tt-text-2xl: clamp(1.7rem, 3vw, 2.15rem); --tt-text-3xl: clamp(2.15rem, 4.5vw, 3.15rem); --tt-text-display: clamp(2.9rem, 7vw, 5rem); /* Spacing scale */ --tt-space-1: 4px; --tt-space-2: 8px; --tt-space-3: 12px; --tt-space-4: 16px; --tt-space-5: 24px; --tt-space-6: 32px; --tt-space-7: 48px; --tt-space-8: 64px; --tt-space-9: 96px; /* Layout rhythm */ --tt-section-pad: clamp(48px, 7vw, 88px); --tt-container: 1240px; }