/* * 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 { /* Brand colour tokens */ --tt-primary: #c53000; --tt-accent: #ffac00; --tt-bg: #f9f4ee; --tt-surface: #ffffff; --tt-surface-soft: #f1eae0; --tt-text: #1a1410; --tt-muted: #6f655e; --tt-border: #e8dfd4; --tt-success: #157a35; --tt-warning: #8a5200; --tt-error: #b33a3a; /* Shape and depth */ --tt-radius-sm: 25px; --tt-radius-md: 25px; --tt-radius-lg: 25px; --tt-radius-full: 999px; --tt-border-input: #9e8e82; --tt-shadow: 0 16px 44px rgba(26, 20, 16, .08); /* Legacy aliases (v0.2.x CSS still reads these) */ --tt-secondary: var(--tt-accent); --tt-dark: #1a1410; --tt-cream: #f9f4ee; --tt-cream2: var(--tt-surface-soft); /* Typography */ --tt-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --tt-font-heading: var(--tt-font); /* override via CRM branding to change heading font */ --tt-font-body: var(--tt-font); /* override via CRM branding to change body/paragraph 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.1rem); --tt-text-3xl: clamp(2.1rem, 4.5vw, 3rem); --tt-text-display: clamp(2.6rem, 7vw, 4.6rem); /* 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, 8vw, 88px); --tt-container: 1800px; }