/* ============================================================ MASTER DESIGN TOKENS — Install Team App (DARK) ============================================================ Single source of truth for ALL visual properties. HOW TO RESTYLE THIS APP: Edit values in this file -> run: npm run css:build Every component, page, and layout updates automatically. TAILWIND BRIDGE: Every token here has a corresponding Tailwind utility in tailwind.config.js. Use the utility class — NEVER the raw CSS variable or a hex value directly in HTML. Token: -> Tailwind class --color-primary -> bg-primary / text-primary / border-primary --btn-height -> h-btn --max-width-app -> max-w-app --z-toast -> z-toast WHY DARK: This is an outdoor, daylight, glare-heavy, one-handed, gloved-hands app. Dark surfaces with the yellow primary give the highest contrast on a phone at arm's length in a parking lot. The theme is settled BEFORE components are written — restock_app's component library went unused precisely because it was built light and the app shipped dark. ============================================================ */ :root { /* ── Brand Colors ──────────────────────────────────────────── Change these 5 lines to rebrand the entire app. Yellow on near-black is already high contrast (>12:1). */ --color-primary: #f9d027; /* Brevvie yellow */ --color-primary-hover: #ffdd4a; /* Lighter on dark */ --color-primary-active: #e6c020; /* Pressed / active */ --color-primary-border: #e6c020; --color-on-primary: #000000; /* Text on brand bg */ /* ── Neutrals — slate scale, ascending = darker ────────────── Standard Tailwind semantics preserved: gray-50 is lightest. On dark surfaces use gray-100/200 for body text and gray-400/500 for muted text. */ --color-white: #ffffff; --color-black: #000000; --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-200: #e2e8f0; --color-gray-300: #cbd5e1; --color-gray-400: #94a3b8; --color-gray-500: #64748b; --color-gray-600: #475569; --color-gray-700: #334155; --color-gray-800: #1e293b; --color-gray-900: #0f172a; --color-gray-950: #080d16; /* ── Semantic / Feedback — dark variants ───────────────────── Each state has: bg (deep) / border (mid) / text (bright) */ --color-success: #0f2a1a; --color-success-border: #1d5236; --color-success-text: #6ee7a8; --color-error: #2c1416; --color-error-border: #7f2a2f; --color-error-text: #fca5a5; --color-warning: #2e2510; --color-warning-border: #6b5518; --color-warning-text: #fcd34d; --color-info: #101f33; --color-info-border: #1e4067; --color-info-text: #93c5fd; /* ── Surfaces ──────────────────────────────────────────────── Change these to adjust the app's background feel. */ --color-bg-app: #0b1017; /* Page background */ --color-bg-card: #161d27; /* Card / panel bg */ --color-bg-card-hover: #1e2733; /* Card hover / pressed */ --color-bg-sunken: #0e141d; /* Wells, empty slots */ --color-bg-header: rgba(11, 16, 23, 0.85); --color-bg-footer: rgba(11, 16, 23, 0.95); --color-bg-overlay: rgba(0, 0, 0, 0.75); --color-bg-input: #0e141d; /* ── Text ────────────────────────────────────────────────────*/ --color-text: #e8edf4; /* Body text */ --color-text-strong: #ffffff; /* Headings */ --color-text-muted: #94a3b8; /* Secondary / labels */ --color-text-faint: #64748b; /* Disabled / hints */ /* ── Borders ─────────────────────────────────────────────────*/ --color-border: #263140; --color-border-strong: #36445a; --color-border-input: #36445a; --color-border-focus: #f9d027; /* ── Typography ────────────────────────────────────────────── System-first stack: resolves to SF Pro on Apple platforms, Segoe UI on Windows, Roboto on Android. Deliberately NOT a webfont — this app runs on bad LTE and a Google Fonts round-trip is a real cost in a parking lot. */ --font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-semibold: 600; --font-weight-bold: 700; /* Base is 16px minimum everywhere — anything smaller in an triggers iOS focus auto-zoom. */ --text-xs: 0.75rem; /* 12px — badges only */ --text-sm: 0.875rem; /* 14px — metadata */ --text-base: 1rem; /* 16px — body / inputs */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ── Spacing Scale ─────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ── Radii ──────────────────────────────────────────────────── All UI elements use rounded-md. Never rounded-lg/xl on controls. Cards may use rounded-lg. */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px — use everywhere */ --radius-lg: 0.5rem; /* 8px — cards */ --radius-xl: 0.75rem; /* 12px */ --radius-full: 9999px; /* ── Shadows ────────────────────────────────────────────────── Shadows read weakly on dark surfaces — elevation is carried by --color-bg-card vs --color-bg-app plus borders. These stay for focus rings and the modal sheet. */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.6); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7); /* ── Transitions ──────────────────────────────────────────────*/ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; /* ── Z-Index Scale ──────────────────────────────────────────── Use these token classes — never z-50, z-[70], z-[80]. */ --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-header: 50; --z-overlay: 60; --z-modal: 70; --z-toast: 80; /* ── Layout ───────────────────────────────────────────────────*/ --max-width-app: 56rem; /* 896px — tablet cap */ --header-height: 3.5rem; /* 56px */ --footer-height: 4.5rem; /* 72px — sticky action */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); /* ── Component Dimensions ──────────────────────────────────── FIELD OVERRIDE: minimum tap target is 56px, not the design system's 40px. These are gloved hands on a phone. */ --btn-height: 3.5rem; /* 56px — default button */ --btn-height-lg: 4rem; /* 64px — primary CTA */ --btn-height-sm: 2.75rem; /* 44px — Apple minimum */ --input-height: 3.5rem; /* 56px — all inputs */ --tap-min: 3.5rem; /* 56px — any tap target */ /* ── Visual Effects ───────────────────────────────────────────*/ --backdrop-blur: 8px; --spinner-size: 1rem; --spinner-border: 2px; }