/* =============================================================
Quibot Retails by Geintec — Design Tokens
v1.0 · 2026-05 · FINAL · Spark Bot direction
============================================================= */
/* ---------- Fonts (Google Fonts CDN) ----------
Add to :
*/
:root {
/* =========================================================
BRAND COLORS — Spark Bot
========================================================= */
/* Primary brand — Teal Quibot */
--teal: #0EA5A4; /* primary brand · nav active · primary chart */
--teal-light: #14C5C4; /* hover state, accent-on-dark */
--teal-700: #0A8483;
--teal-100: #B4E8E7;
--teal-50: #E6F8F8;
/* Spark accent — Coral (activation moments only) */
--coral: #FF6B4D; /* CTAs, "AI activated" highlights, spark dot in wordmark */
--coral-600: #E85529;
--coral-700: #C8431E;
--coral-100: #FFE8E5;
--coral-50: #FFF3EC;
/* Base */
--ink: #1F2937; /* base UI text, slightly warm dark */
--bone: #F7F4EF; /* warm off-white background (marketing) */
--canvas: #FAF9F6; /* product canvas */
--surface: #FFFFFF; /* cards */
--mist: #F2F4F7; /* subtle inset */
/* Geintec parent endorsement (used only for "by Geintec" line + parent contexts) */
--geintec-blue: #0A4DB0; /* deep brand blue */
--geintec-cyan: #3EBDCF; /* accent cyan */
--azure-50: #EAF3FC;
--azure-700: var(--geintec-blue);
/* Semantic */
--mint: #22C58B; /* success, sale confirmed, online */
--mint-600: #14A06E;
--mint-100: #D6F4E5;
--amber: #F2B233; /* warning, in-prep */
--amber-100: #FBE9C2;
--crimson: #E5484D; /* error, voided */
--crimson-100: #FBD5D6;
/* Slate scale (warm grays — pair with bone) */
--slate-50: #FAFAF8;
--slate-100: #F2F1ED;
--slate-200: #E5E7EB;
--slate-300: #D1D5DB;
--slate-400: #9CA3AF;
--slate-500: #6B7280;
--slate-600: #4B5563;
--slate-700: #374151;
--slate-800: #1F2937;
--slate-900: #111827;
/* =========================================================
SEMANTIC SURFACE TOKENS
========================================================= */
--bg: var(--bone); /* marketing surface */
--bg-app: var(--canvas); /* product surface */
--surface-2: var(--mist); /* subtle inset */
--border: var(--slate-200);
--border-strong:var(--slate-300);
--fg: var(--ink);
--fg-muted: var(--slate-500);
--fg-subtle: var(--slate-400);
--fg-on-brand: #FFFFFF;
--accent: var(--teal); /* primary brand accent */
--accent-hover: var(--teal-700);
--accent-soft: var(--teal-50);
--spark: var(--coral); /* activation / CTA accent */
--spark-hover: var(--coral-600);
--spark-soft: var(--coral-50);
/* =========================================================
TYPE
========================================================= */
--font-display: 'Sora', system-ui, sans-serif;
--font-body: 'Manrope', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Type scale (modular, 1.20 ratio off 16px) */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-md: 18px;
--text-lg: 22px;
--text-xl: 28px;
--text-2xl: 36px;
--text-3xl: 48px;
--text-4xl: 64px;
--text-5xl: 84px;
--leading-tight: 1.08;
--leading-snug: 1.25;
--leading-normal: 1.45;
--leading-loose: 1.65;
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-caps: 0.08em;
--tracking-eyebrow: 0.22em; /* "RETAILS" + "by GEINTEC" tracking */
/* =========================================================
SPACING (4px base)
========================================================= */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* =========================================================
RADII
========================================================= */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-pill: 999px;
/* =========================================================
SHADOWS
========================================================= */
--shadow-1: 0 1px 2px rgba(31,41,55,.06), 0 1px 1px rgba(31,41,55,.04);
--shadow-2: 0 8px 24px -8px rgba(31,41,55,.12), 0 2px 4px rgba(31,41,55,.06);
--shadow-3: 0 24px 64px -16px rgba(31,41,55,.24);
--shadow-focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--coral);
/* =========================================================
MOTION
========================================================= */
--ease-out: cubic-bezier(0.2, 0, 0, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spark: cubic-bezier(0.34, 1.56, 0.64, 1); /* only for success tick + spark animations */
--dur-fast: 120ms;
--dur: 200ms;
--dur-slow: 320ms;
/* =========================================================
Z-INDEX
========================================================= */
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 1000;
--z-toast: 1100;
}
/* =============================================================
BASE ELEMENTS
============================================================= */
html, body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection {
background: var(--coral-100);
color: var(--coral-700);
}
/* =============================================================
SEMANTIC TYPE
============================================================= */
.display-xl,
h1.display {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--text-5xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg);
}
h1, .h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-4xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}
h2, .h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-2xl);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
}
h3, .h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-xl);
line-height: var(--leading-snug);
letter-spacing: -0.015em;
}
h4, .h4 {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-lg);
line-height: var(--leading-snug);
}
p, .body {
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--fg);
}
.body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }
.body-lg { font-size: var(--text-md); line-height: var(--leading-normal); }
.lead { font-size: var(--text-md); line-height: var(--leading-snug); color: var(--fg-muted); }
.eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--fg-muted);
}
.kpi {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-3xl);
line-height: 1;
letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums;
}
code, .mono {
font-family: var(--font-mono);
font-size: 0.92em;
}
.num-tabular { font-variant-numeric: tabular-nums; }
/* =============================================================
QUIBOT WORDMARK — canonical
Use .qw + size variant. ::after draws the coral dot above the "i".
============================================================= */
.qw {
font-family: var(--font-display);
font-weight: 800;
color: var(--ink);
letter-spacing: -0.045em;
line-height: 1;
position: relative;
display: inline-block;
}
.qw::after {
content: "";
position: absolute;
background: var(--coral);
border-radius: 50%;
}
.qw-24 { font-size: 24px; } .qw-24::after { width: 4px; height: 4px; top: 4px; left: 75.5%; }
.qw-32 { font-size: 32px; } .qw-32::after { width: 5px; height: 5px; top: 5px; left: 75.5%; }
.qw-44 { font-size: 44px; } .qw-44::after { width: 7px; height: 7px; top: 7px; left: 75.5%; }
.qw-56 { font-size: 56px; } .qw-56::after { width: 8px; height: 8px; top: 9px; left: 75.5%; }
.qw-72 { font-size: 72px; } .qw-72::after { width: 10px;height: 10px;top: 12px; left: 75.5%; }
.qw-white { color: #fff; }
.qw-teal { color: var(--teal); }