/* ============================================================ 01-tokens.css (1 of 6) Design tokens and the base reset. Everything downstream reads the custom properties defined here, so this file loads first and nothing else declares a :root token. Part of an ordered set. The browser concatenates these in the order they are linked in fragments/head.html, and that order IS the cascade. Do not reorder the tags, and do not move a rule between files without checking what it would then stop overriding. ============================================================ */ /* ============================================================ BiteSite design system — warm, appetizing, not generic-AI-blue. Built as overrides on top of Bootstrap 5, so every existing .btn / .card / .badge / .form-control class keeps working. v2 — Mobile-first redesign inspired by modern food ordering apps. ============================================================ */ :root { /* ============================================================ BiteSite — BIG BEEF / burger-landing neo-brutalist system. Ported from /Users/yash113gadia/burger-landing/css/style.css. Bone canvas, near-black 3px borders, hard offset shadows, red + yellow accents, Archivo Black uppercase type. ============================================================ */ /* --- Surfaces. Warm bone canvas, bone cards. --- */ --color-bg: #f2ead9; /* bone canvas */ --color-surface: #f2ead9; /* bone cards */ --color-field: #fffdf6; /* inputs — lighter bone */ --color-field-border: #14100d; /* control edge — near-black */ --color-field-rule: #14100d; --color-surface-food: #f2ead9; --color-surface-deep: #e6dcc4; /* pressed/active */ --color-ink: #14100d; /* near-black */ --color-ink-muted: #5c5247; /* warm grey */ --color-border: #14100d; /* --- Terracotta red is the primary action colour. --- */ --color-primary: #e8281e; /* red */ --color-primary-dark: #b81f16; /* red-dark */ --color-primary-soft: #ff6a5e; --color-primary-tint: #ffd9d4; /* --- Yellow accents. --- */ --color-accent: #14100d; --color-accent-strong: #14100d; --color-accent-tint: #ffc918; /* --- Status. --- */ --color-success: #14100d; --color-success-tint: #ffc918; --color-warning: #14100d; --color-warning-tint: #ffc918; --color-info: #14100d; --color-info-tint: #ffc918; --color-danger: #e8281e; --color-danger-tint: #ffd9d4; --color-nav: #f2ead9; /* --- Shape. Brutalist: tight radii, hard edges. --- */ --radius-sm: 0px; --radius-md: 2px; --radius-lg: 2px; --radius-pill: 2px; /* --- Line weight. --------------------------------------------------------- Every structural border in the product reads from these, so the weight of the whole UI is four numbers rather than ninety literals. The original system drew everything at 3px near-black. At the density the customer app runs — a few big cards on a phone — that is the look. On the staff and admin consoles, where a screen is a table of thirty rows inside a bordered panel inside a bordered card, the same weight stacks: a 3px panel edge two pixels above a 3px header rule reads as one thick black bar, and the page stops looking designed and starts looking heavy. So: one structural weight, thin enough to stack without turning into a slab, plus a genuinely quiet rule for separators that were never meant to be structure at all. The shapes, palette and type are untouched. */ --border-w: 1.5px; /* cards, panels, tables, controls */ --border-w-loud: 2px; /* the few things that must assert: primary buttons */ --rule-w: 1px; /* separators between rows and sections */ --rule-color: rgba(20, 16, 13, 0.14); --rule-color-strong: rgba(20, 16, 13, 0.28); /* --- Depth. Still hard offset shadows, no blur — but cast as translucent ink rather than solid near-black, so a card reads as lifted instead of as a second black rectangle behind the first. --- */ --shadow-xs: 1px 1px 0 rgba(20, 16, 13, 0.20); --shadow-sm: 2px 2px 0 rgba(20, 16, 13, 0.18); --shadow-md: 3px 3px 0 rgba(20, 16, 13, 0.16); --shadow-lg: 4px 4px 0 rgba(20, 16, 13, 0.14); --shadow-pressed: 1px 1px 0 rgba(20, 16, 13, 0.20); --shadow-sticky: 0 -1.5px 0 rgba(20, 16, 13, 0.18); --color-coral: #ffc918; --color-coral-deep: #ffb300; /* --- Focus ring. --- */ /* Two rings: a yellow halo that separates the control from the page, and a thin ink edge that keeps the contrast ratio. Reads clearly without the 3px slab. */ --focus-ring: 0 0 0 2px var(--color-accent-tint), 0 0 0 3.5px var(--color-ink); /* --- Type. Archivo for body, Archivo Black for display. --- */ --font-display: 'Archivo Black', system-ui, sans-serif; --font-body: 'Archivo', system-ui, -apple-system, sans-serif; /* --- Type scale. --- */ --text-display-lg: 40px; --lh-display-lg: 40px; --text-headline-lg: 28px; --lh-headline-lg: 32px; --text-headline-md: 22px; --lh-headline-md: 28px; --text-body-lg: 16px; --lh-body-lg: 24px; --text-body-md: 14px; --lh-body-md: 20px; --text-label-lg: 14px; --lh-label-lg: 20px; --text-label-sm: 12px; --lh-label-sm: 16px; /* --- Spacing scale. --- */ --stack-xs: 4px; --stack-sm: 12px; --stack-md: 24px; --stack-lg: 48px; --margin-mobile: 24px; --gutter-mobile: 20px; --hit-area: 48px; --bottom-nav-height: 64px; --safe-area-bottom: env(safe-area-inset-bottom, 0px); } /* `text-wrap` is a shorthand for text-wrap-mode + text-wrap-style, so `text-wrap: pretty` also sets mode back to its initial `wrap` — on every element in the document. That silently defeats any `white-space: nowrap` that relies on inheritance: the parent computes nowrap, and this rule then applies `wrap` directly to each child, which beats an inherited value. It is why the marquee strip broke each "FRESH · FAST · FIERCE" onto three lines despite its track being explicitly nowrap. The longhand asks for the thing that was actually wanted — nicer line breaking — and leaves wrapping mode alone. */ * { text-wrap-style: pretty; }