/* ============================================================================ smart.business.atelier — Foundations (colors + type) Brand: SBA / Holger Henke | Strategieberatung — AI-readiness consulting ---------------------------------------------------------------------------- AUTHENTIC tokens are lifted directly from the brand's own shipped code (imap-mailbox-search-tool/index.html + discovery-call-system/jotform/custom.css). Tokens marked "extended" were harmonised in oklch from the authentic navy to complete the system — flagged in README. Core hero colour is #1a3a6b. ============================================================================ */ :root { /* ---- Brand navy (AUTHENTIC — labelled "SBA-Branding" in source) -------- */ --sba-navy: #1a3a6b; /* primary — hero, headers, CTAs */ --sba-navy-light: #2a5298; /* gradient partner, hovers */ --sba-navy-deep: #0f2548; /* table header border, deep contrast */ --sba-navy-faint: #e8eef6; /* badge fills, tints */ --sba-surface-blue: #f0f4f8; /* accent surface / zebra rows */ /* ---- Neutrals (AUTHENTIC) ---------------------------------------------- */ --sba-ink: #1e293b; /* primary text (slate-800) */ --sba-muted: #64748b; /* secondary text (slate-500) */ --sba-border: #d1d9e6; /* hairline borders */ --sba-page: #f4f6fa; /* page background */ --sba-white: #ffffff; /* ---- Neutrals (extended — oklch-harmonised) ---------------------------- */ --sba-ink-2: #334155; /* slate-700, sub-headings */ --sba-faint: #eef2f7; /* lightest fill */ --sba-line-soft: #edf1f7; /* table row divider (authentic) */ /* ---- Semantic (AUTHENTIC) ---------------------------------------------- */ --sba-success: #16a34a; --sba-success-bg: #ecfdf5; --sba-success-ink: #166534; --sba-warn: #f59e0b; --sba-warn-bg: #fffbeb; --sba-warn-ink: #92400e; --sba-error: #ef4444; --sba-error-bg: #fef2f2; --sba-error-ink: #991b1b; --sba-info-bg: #f0f7ff; --sba-info-border: #bfdbfe; --sba-selected: #dbeafe; /* selected table row */ /* ---- Atelier accent (extended — editorial warm, use sparingly) --------- */ --sba-brass: #b07d34; /* craft/atelier accent for editorial marks */ --sba-brass-soft: #f3ebdd; /* ---- Gradients (AUTHENTIC) --------------------------------------------- */ --sba-grad-navy: linear-gradient(135deg, var(--sba-navy), var(--sba-navy-light)); /* ===== TYPE ============================================================= */ /* DM Sans + JetBrains Mono are the brand's real fonts (loaded via Google */ /* Fonts CDN exactly as the shipped tools do). Times New Roman italic is */ /* the brand's authentic editorial accent (used on Jotform anchor labels). */ --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-serif: 'Times New Roman', Times, Georgia, serif; /* editorial accent */ /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* Type scale (UI-leaning, derived from shipped tools) */ --fs-display: 44px; --lh-display: 1.05; /* hero headlines */ --fs-h1: 32px; --lh-h1: 1.12; --fs-h2: 24px; --lh-h2: 1.2; --fs-h3: 18px; --lh-h3: 1.3; --fs-body: 15px; --lh-body: 1.6; /* default body */ --fs-sm: 13px; --lh-sm: 1.5; --fs-xs: 11px; --lh-xs: 1.4; /* eyebrows / meta */ --tracking-eyebrow: .06em; /* uppercase mono eyebrows */ --tracking-tight: -.02em; /* large headings */ /* ===== SHAPE / DEPTH (AUTHENTIC) ======================================== */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 14px; --radius-pill: 999px; --shadow-card: 0 1px 2px rgba(15,37,72,.04), 0 1px 3px rgba(15,37,72,.06); --shadow-pop: 0 8px 30px rgba(0,0,0,.22); /* toast / floating */ --shadow-modal: 0 24px 64px rgba(0,0,0,.22); /* modal */ --focus-ring: 0 0 0 3px rgba(26,58,107,.12); /* ===== SPACING (4px base) =============================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ===== MOTION (AUTHENTIC) =============================================== */ --ease-standard: cubic-bezier(.2,.6,.2,1); --dur-fast: .12s; --dur-base: .15s; --dur-slow: .25s; } /* ===== SEMANTIC ELEMENT DEFAULTS ========================================= */ .sba-display { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); color: var(--sba-navy); } .sba-h1 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-tight); color: var(--sba-navy); } .sba-h2 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--sba-ink); } .sba-h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--sba-ink); } .sba-body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--sba-ink); } .sba-small { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--sba-muted); } /* Mono eyebrow / label — a signature of the brand's data surfaces */ .sba-eyebrow { font-family: var(--font-mono); font-weight: var(--fw-semibold); font-size: var(--fs-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--sba-muted); } .sba-mono { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--sba-navy); } /* Editorial accent — pull quotes, atelier marks */ .sba-editorial { font-family: var(--font-serif); font-style: italic; color: var(--sba-ink); }