/* ============================================================ FIXLOSOPHY – Global Styles Mobile-first, responsive bike shop theme ============================================================ */ /* ---------- Design Tokens ---------- */ :root { --green: #3DBB48; --green-dark: #2D9A38; --green-glow: rgba(61,187,72,0.20); --dark: #0A0A0A; --dark-2: #111111; --dark-3: #1C1C1C; --dark-4: #2A2A2A; --mid: #888888; --white: #ffffff; --border-dark: #2A2A2A; --font: 'Helvetica Neue', Helvetica, Arial, sans-serif; --radius: 12px; --radius-sm: 8px; --shadow: 0 4px 24px rgba(0,0,0,0.10); --shadow-lg: 0 12px 40px rgba(0,0,0,0.20); --nav-h: 64px; /* Spacing scale. Every padding, margin and gap in both stylesheets now comes from here. There used to be ~35 distinct literals doing the work of seven — 0.4 next to 0.45, 0.6 next to 0.65 next to 0.7, .75rem next to 0.75rem — and that drift is what made the admin dashboard in particular look unfinished. Off-scale values were snapped to the nearest step (ties toward the tighter one), so a few elements moved by up to 0.25rem; nothing moved further. The step numbers are multiples of --space-1 (0.25rem), so --space-8 is 2rem and --space-12 is 3rem. There is deliberately no --space-7: 1.75rem was a one-off that belonged at 2rem. */ --space-05: 0.125rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* The "this row is highlighted" left bar. Was 3px in two places and 2px in two others, via two different mechanisms (border-left and an inset box-shadow). */ --rule-accent: 3px; /* Height of the mobile sticky action bar. The list above it needs matching bottom clearance or the last card sits under the bar; keeping both ends on one token stops them drifting apart. */ --sticky-actions-h: 4.5rem; /* Font-size scale. Every size below 1rem in both stylesheets now comes from here — there used to be nine different literals (0.7 / 0.75 / 0.8 / 0.82 / 0.85 / 0.875 / 0.9 / 0.95rem, plus .9rem and .875rem written without the leading zero) doing what is really about five jobs, which is where the "everything is slightly different" feeling came from. Values are unchanged from what was already on the page — this was a consolidation, not a re-scale — except 0.82rem, a one-off that is now --fs-xs like every other caption. */ --fs-2xs: 0.7rem; /* micro caps: table headers, badges, step labels */ --fs-tiny: 0.75rem; /* status/reference badges, stat labels */ --fs-caption: 0.8rem; /* captions and meta text under a heading */ --fs-xs: 0.85rem; /* muted caption/meta text */ --fs-sm: 0.875rem; /* small body text: labels, footer copy, error text */ --fs-body-sm: 0.9rem; /* small body copy */ --fs-body: 0.95rem; /* form controls, buttons, card titles */ --fs-h3-compact: 1.05rem; /* card/table sub-heading, smaller than default h3 */ /* Semantic alias — the uppercase "eyebrow" label above a heading. */ --fs-eyebrow: var(--fs-caption); /* Minimum comfortable touch target. Anything a finger has to hit on a phone should reach this in both dimensions, padding included. */ --touch-min: 44px; } /* ---------- Reset / Base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Form controls don't inherit font from their ancestors — the UA applies its own `font` shorthand instead. Without this,