/* ============================================================================
* SlowBooks Pro — Design Tokens
*
* Palette lifted verbatim from app/static/css/style.css (QB2003 "Default Blue"
* skin, originally extracted from SKIN_BLUE.DAT via Resource Hacker). The
* marketing site uses the same colors as the product so the visual identity
* is continuous — when a user lands here and then downloads the app, the
* chrome feels like the same world.
*
* Aesthetic direction: "decompiled luxury". The engineering-artifact nature
* of the project rendered with editorial polish. Technical stamps, graph-
* paper substrates, registration marks — as considered design elements.
* ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Tahoma&family=JetBrains+Mono:wght@400;500;700&display=swap');
:root {
/* ---------- QB2003 palette (primary brand colors) ---------- */
--qb-navy: #003366;
--qb-navy-dark: #002244;
--qb-navy-mid: #004488;
--qb-blue: #336699;
--qb-blue-light: #4a7fb5;
--qb-blue-accent: #5b9bd5;
--qb-teal: #669999;
--qb-green: #339966;
--qb-green-dark: #2d7d56;
--qb-gold: #cc9933;
--qb-gold-light: #e6b85c;
--qb-red: #cc3333;
--qb-orange: #cc6633;
--qb-cream: #f6f1e4; /* a richer paper tone for the hero substrate */
/* ---------- Tinted papers (retro app authenticity) ---------- */
--invoice-bg: #fffef5;
--estimate-bg: #f5fff8;
--form-bg: #f7f8fa;
/* ---------- Chrome (the 2003 UI surfaces) ---------- */
--toolbar-bg: #d6dfe8;
--toolbar-border: #a8b8c8;
--toolbar-top: #e8edf2;
--toolbar-bottom: #c8d0dc;
--content-bg: #eef1f5;
--panel-bg: #ffffff;
--panel-border: #c0c8d0;
--input-border: #7f9db9;
/* ---------- Text ---------- */
--text-primary: #0d1a2e;
--text-secondary: #3a3f58;
--text-muted: #6b7090;
--text-on-navy: #c8d8e8;
--text-on-dark: #e8ecf0;
--ink: #0b1530; /* deepest — for hero headlines */
/* ---------- Typography ---------- */
--font-modern: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
--font-retro: Tahoma, 'Segoe UI', Geneva, Verdana, sans-serif;
--font-mono: 'JetBrains Mono', 'Consolas', 'SF Mono', 'Courier New', monospace;
/* Type scale — wider, more editorial */
--text-2xs: 0.6875rem; /* 11px — dense stamp micro-copy */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.3125rem; /* 21px */
--text-2xl: 1.625rem; /* 26px */
--text-3xl: 2rem; /* 32px */
--text-4xl: 2.75rem; /* 44px */
--text-5xl: 3.75rem; /* 60px */
--text-6xl: 5rem; /* 80px — hero display */
--text-7xl: 6.25rem; /* 100px — extra-large hero on wide viewports */
/* ---------- Spacing (4px base) ---------- */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.5rem;
--sp-6: 2rem;
--sp-8: 3rem;
--sp-10: 4rem;
--sp-12: 6rem;
--sp-16: 8rem;
--sp-20: 10rem;
/* ---------- Layout ---------- */
--container-max: 1240px;
--container-narrow: 820px;
--nav-height: 60px;
/* ---------- Radii ---------- */
--radius-sm: 3px;
--radius-md: 8px;
--radius-lg: 14px;
--radius-pill: 999px;
/* ---------- Shadows ---------- */
--shadow-sm: 0 1px 2px rgba(0, 30, 60, 0.06);
--shadow-md: 0 4px 12px rgba(0, 30, 60, 0.08);
--shadow-lg: 0 16px 40px rgba(0, 30, 60, 0.12);
--shadow-xl: 0 28px 80px rgba(0, 30, 60, 0.18);
--shadow-hero: 0 40px 100px -20px rgba(0, 34, 68, 0.45),
0 12px 32px -8px rgba(0, 34, 68, 0.25);
/* Retro bevels (app-style) */
--bevel-up: inset 1px 1px 0 rgba(255,255,255,.7), inset -1px -1px 0 rgba(0,0,0,.15);
--bevel-down: inset 1px 1px 0 rgba(0,0,0,.15), inset -1px -1px 0 rgba(255,255,255,.7);
/* ---------- Motion ---------- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 0.15s;
--dur-med: 0.35s;
--dur-slow: 0.65s;
--dur-xslow: 1.1s;
/* ---------- Pattern / texture tokens ----------
* Backgrounds used as section substrates. Encoded as SVG data URIs so
* they're self-contained (no extra requests) and retina-crisp. */
/* Blueprint / graph paper — fine navy rules on cream */
--pattern-graph: url("data:image/svg+xml;utf8,");
/* Fine cross-hatch — for hero atmosphere */
--pattern-cross: url("data:image/svg+xml;utf8,");
/* The original "yellow invoice texture" from the app — 4x4 tiled BMP
approximated as a horizontal-stripe SVG */
--pattern-invoice-paper: url("data:image/svg+xml;utf8,");
/* Subtle grain/noise (fBm-ish, tiny) */
--pattern-grain: url("data:image/svg+xml;utf8,");
}
@media (prefers-reduced-motion: reduce) {
:root {
--dur-fast: 0.01s;
--dur-med: 0.01s;
--dur-slow: 0.01s;
--dur-xslow: 0.01s;
}
}
@media (max-width: 900px) {
:root {
--text-6xl: 3.25rem;
--text-5xl: 2.5rem;
--text-4xl: 2rem;
}
}