/* ============================================================ GioBiz · DESIGN TOKENS — single source of truth ------------------------------------------------------------ Theme the whole system from this one file. Every component (React reference + the plain-CSS .gb-* library) references these custom properties — never a raw hex value. Sections: 1. Color palette 2. Semantic color aliases 3. Status + channel 4. Typography 5. Spacing 6. Radii 7. Elevation 8. Motion ============================================================ */ :root { /* ======================================================== 1 · COLOR PALETTE (raw scales) ======================================================== */ /* Brand green — growth / money / go */ --green-50: #E7F6EE; --green-100: #C5EAD6; --green-200: #97DABA; --green-300: #5FC596; --green-400: #25AA73; --green-500: #14855a; /* ★ primary brand — chief c731: the ONE brand green = the live marketplace/store green. --brand + every brand alias resolve here → one green across the whole product. */ --green-600: #097440; --green-700: #075C33; --green-800: #06492A; --green-900: #04331E; /* Neutrals — warm-cool gray, tuned for contrast on cheap panels */ --gray-0: #FFFFFF; --gray-50: #F6F8F6; --gray-100: #EDEFED; --gray-150: #E3E7E3; --gray-200: #D6DBD6; --gray-300: #C0C7C0; --gray-400: #98A098; --gray-500: #6C746C; --gray-600: #4E554E; --gray-700: #363B36; --gray-800: #222722; --gray-900: #12150F; /* Status hues */ --amber-50: #FCF2DD; --amber-100: #F8E2B0; --amber-500: #E0980F; --amber-700: #9C6705; --red-50: #FBE9E9; --red-100: #F6CFCF; --red-500: #D63B3B; --red-700: #95282B; --blue-50: #E7F0FE; --blue-100: #C8DCFB; --blue-500: #2D72EB; --blue-700: #1B4FAA; --teal-500: #0E9B91; /* received / scanned */ --violet-500: #6B57D6; /* assigned / relay */ /* ======================================================== 2 · SEMANTIC COLOR ALIASES (components use these) ======================================================== */ --bg-app: #EEF1ED; --surface: var(--gray-0); --surface-sunken: var(--gray-50); --surface-raised: var(--gray-0); --surface-brand: var(--green-500); --surface-brand-soft: var(--green-50); --surface-inverse: var(--gray-900); --text-strong: var(--gray-900); --text-default: var(--gray-700); --text-muted: var(--gray-500); --text-faint: var(--gray-400); --text-on-brand:#FFFFFF; --text-on-dark: #F6F8F6; --text-link: var(--green-600); --border: var(--gray-200); --border-strong: var(--gray-300); --border-brand: var(--green-500); --divider: var(--gray-150); --brand: var(--green-500); --brand-ink: var(--green-700); --brand-press: var(--green-600); --focus-ring: var(--green-400); /* money semantics */ --money-in: var(--green-600); /* inflow / surplus */ --money-out: var(--red-500); /* outflow / deficit */ /* ======================================================== 3 · STATUS + CHANNEL ======================================================== */ /* Named semantic status colors (success / danger / warning / info) */ --success: var(--green-500); --success-bg: var(--green-50); --success-ink: var(--green-700); --danger: var(--red-500); --danger-bg: var(--red-50); --danger-ink: var(--red-700); --warning: var(--amber-500); --warning-bg: var(--amber-50); --warning-ink: var(--amber-700); --info: var(--blue-500); --info-bg: var(--blue-50); --info-ink: var(--blue-700); /* Operational state pairs used by status badges */ --status-success-fg: var(--green-700); --status-success-bg: var(--green-50); --status-pending-fg: var(--amber-700); --status-pending-bg: var(--amber-50); --status-transit-fg: var(--blue-700); --status-transit-bg: var(--blue-50); --status-failed-fg: var(--red-700); --status-failed-bg: var(--red-50); --status-neutral-fg: var(--gray-600); --status-neutral-bg: var(--gray-100); /* Order-source / channel tags (Africa-first commerce) */ --src-whatsapp: #1FA855; --src-instagram: #C2389A; --src-call: #2D72EB; --src-market: #E0980F; /* walk-in / market stall */ --src-website: var(--green-500); /* website order-source = the brand green (chief c731: tracks --green-500, not a stale hardcode) */ --src-other: #6C746C; /* ======================================================== 4 · TYPOGRAPHY ------------------------------------------------------------ System font stack — ZERO webfont download, instant paint on low-end Android. Roboto is the native Android UI face, so it stays on-brand there for free. To use a self-hosted brand face instead, see fonts.css and only change --font-sans here. ======================================================== */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* size scale (mobile-first; never below 12px on screen) */ --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 21px; --fs-2xl: 26px; --fs-3xl: 32px; --fs-4xl: 40px; /* weights */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-extra: 800; /* @kind font */ /* line heights */ --lh-tight: 1.1; /* @kind font */ --lh-snug: 1.25; /* @kind font */ --lh-normal: 1.45; /* @kind font */ --lh-relaxed: 1.6; /* @kind font */ /* letter spacing */ --ls-tight: -0.02em; /* @kind font */ --ls-snug: -0.01em; /* @kind font */ --ls-normal: 0; /* @kind font */ --ls-wide: 0.02em; /* @kind font */ --ls-caps: 0.06em; /* @kind font */ /* semantic type roles (shorthand font: ) */ --type-display: var(--fw-extra) var(--fs-4xl)/var(--lh-tight) var(--font-sans); --type-h1: var(--fw-bold) var(--fs-2xl)/var(--lh-snug) var(--font-sans); --type-h2: var(--fw-bold) var(--fs-xl)/var(--lh-snug) var(--font-sans); --type-h3: var(--fw-semibold) var(--fs-lg)/var(--lh-snug) var(--font-sans); --type-body: var(--fw-regular) var(--fs-base)/var(--lh-normal) var(--font-sans); --type-body-strong: var(--fw-semibold) var(--fs-base)/var(--lh-normal) var(--font-sans); --type-label: var(--fw-semibold) var(--fs-sm)/var(--lh-snug) var(--font-sans); --type-caption: var(--fw-medium) var(--fs-xs)/var(--lh-snug) var(--font-sans); --type-mono: var(--fw-medium) var(--fs-sm)/var(--lh-snug) var(--font-mono); /* ======================================================== 5 · SPACING & LAYOUT (4px grid) ======================================================== */ --sp-0: 0; /* @kind spacing */ --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; /* default gutter */ --sp-6: 20px; --sp-7: 24px; --sp-8: 32px; --sp-9: 40px; --sp-10: 48px; --sp-12: 64px; --screen-ref: 390px; /* design reference width */ --screen-min: 360px; /* must not break below */ --screen-pad: 16px; /* horizontal page gutter */ --content-max: 440px; /* phone content cap on big screens */ --touch-min: 48px; /* minimum hit target */ --control-h: 48px; --control-h-sm: 40px; --control-h-lg: 56px; --bottom-nav-h: 64px; --app-bar-h: 56px; /* ======================================================== 6 · RADII ======================================================== */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; /* default card / input */ --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px; /* ======================================================== 7 · ELEVATION (restrained — borders separate, shadow lifts) ======================================================== */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(18, 21, 15, 0.06); --shadow-card: 0 1px 2px rgba(18, 21, 15, 0.05), 0 1px 1px rgba(18, 21, 15, 0.04); --shadow-raised: 0 4px 12px rgba(18, 21, 15, 0.10); --shadow-overlay: 0 12px 32px rgba(18, 21, 15, 0.18); --shadow-nav: 0 -1px 0 var(--border), 0 -6px 16px rgba(18, 21, 15, 0.06); --ring-width: 3px; --ring: 0 0 0 var(--ring-width) rgba(37, 170, 115, 0.40); /* ======================================================== 8 · MOTION (quick & flat — snappy on slow hardware) ======================================================== */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 180ms; /* @kind other */ --dur-slow: 260ms; /* @kind other */ --press-scale: 0.97; /* @kind other */ }