/* ============================================================
SparkOptimus Design System — Foundations
Colors, type, spacing, radii, shadows.
Import this file before component styles.
============================================================ */
/* Google Fonts — loaded via + in each HTML
for optimal render performance. CSS @import creates a render-blocking chain; the
approach allows parallel fetching alongside HTML parsing. */
/* Brand typeface — BG-Spark (provided by SparkOptimus) */
@font-face {
font-family: "BG Spark";
src: url("../fonts/BG-Spark-Regular.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "BG Spark";
src: url("../fonts/BG-Spark-RegularItalic.otf") format("opentype");
font-weight: 400;
font-style: italic;
font-display: block;
}
@font-face {
font-family: "BG Spark";
src: url("../fonts/BG-Spark-Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "BG Spark";
src: url("../fonts/BG-Spark-BoldItalic.otf") format("opentype");
font-weight: 700;
font-style: italic;
font-display: block;
}
/* "Title" cut — used for hero / display sizes. Mapped to weight 800. */
@font-face {
font-family: "BG Spark";
src: url("../fonts/BG-Spark-Title.otf") format("opentype");
font-weight: 800;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "BG Spark";
src: url("../fonts/BG-Spark-TitleItalic.otf") format("opentype");
font-weight: 800;
font-style: italic;
font-display: block;
}
/* Display alias — also exposed under its native cut name */
@font-face {
font-family: "BG Spark Title";
src: url("../fonts/BG-Spark-Title.otf") format("opentype");
font-weight: 400 900;
font-style: normal;
font-display: block;
}
:root {
/* -------------------------------------------------------- */
/* COLORS — Brand */
/* -------------------------------------------------------- */
/* Primary cyan from the logo mark — the "Spark". */
--so-cyan-50: #e6fbff;
--so-cyan-100: #c2f5fd;
--so-cyan-200: #8eeefc;
--so-cyan-300: #4ae5fa;
--so-cyan-400: #1eddf7;
--so-cyan-500: #00d9f4; /* brand primary */
--so-cyan-600: #00b3cc;
--so-cyan-700: #0a8ca0;
--so-cyan-800: #14687a;
--so-cyan-900: #134c59;
/* Deep navy — used on dark sections, charts, ink */
--so-ink-50: #f5f7fa;
--so-ink-100: #e6ebf2;
--so-ink-200: #c8d2e0;
--so-ink-300: #94a3bb;
--so-ink-400: #5e6f8a;
--so-ink-500: #3a4a64;
--so-ink-600: #243349;
--so-ink-700: #182338;
--so-ink-800: #0e172a;
--so-ink-900: #060b1a; /* near-black, NOT pure #000 */
/* Neutrals — warm-leaning paper */
--so-gray-0: #ffffff;
--so-gray-50: #fafafa;
--so-gray-100: #f4f4f5;
--so-gray-200: #e7e7ea;
--so-gray-300: #d3d4d8;
--so-gray-400: #a1a3aa;
--so-gray-500: #71747c;
--so-gray-600: #52555c;
--so-gray-700: #3a3d44;
--so-gray-800: #25272d;
--so-gray-900: #131418;
/* Accent — used sparingly for category tags, illustrations */
--so-accent-coral: #ff7a59;
--so-accent-amber: #f5b400;
--so-accent-mint: #4fd1a4;
--so-accent-violet: #6e6bff;
/* Semantic */
--so-success: #2bb673;
--so-warning: #f5b400;
--so-danger: #e5484d;
--so-info: var(--so-cyan-500);
/* -------------------------------------------------------- */
/* COLORS — Surface / semantic */
/* -------------------------------------------------------- */
--bg-canvas: var(--so-gray-0);
--bg-subtle: var(--so-gray-50);
--bg-muted: var(--so-gray-100);
--bg-inverse: var(--so-ink-900);
--bg-brand: var(--so-cyan-500);
--bg-brand-soft:var(--so-cyan-50);
--fg-1: var(--so-ink-900); /* primary text */
--fg-2: var(--so-ink-600); /* body / secondary */
--fg-3: var(--so-gray-500);/* tertiary, captions */
--fg-4: var(--so-gray-400);/* disabled, hints */
--fg-on-brand: var(--so-ink-900); /* cyan is light — ink reads on it */
--fg-on-inverse: var(--so-gray-0);
--border-1: rgba(15, 23, 42, 0.08);
--border-2: rgba(15, 23, 42, 0.14);
--border-strong: rgba(15, 23, 42, 0.28);
--border-on-inverse: rgba(255, 255, 255, 0.12);
--link: var(--so-ink-900);
--link-hover: var(--so-cyan-700);
/* -------------------------------------------------------- */
/* TYPOGRAPHY — BG Spark is the brand typeface. */
/* "Title" cut (weight 800) is used for hero/display. */
/* Bold (700) for headings. Regular (400) for body. */
/* -------------------------------------------------------- */
--font-sans: "BG Spark", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-display: "BG Spark Title", "BG Spark", ui-sans-serif, system-ui, sans-serif;
--font-serif: "BG Spark", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* Quoted text uses the brand italic cut (BG-Spark-RegularItalic) */
--font-quote: "BG Spark", "Lora", "Iowan Old Style", Georgia, serif;
/* Weights – we use 400 / 500 / 700 / 800 mostly */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
/* Type scale — generous, editorial. Display sizes use clamp */
--text-xs: 13px;
--text-sm: 14px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 36px;
--text-5xl: 44px;
--text-6xl: 56px;
--text-7xl: 72px;
--text-display: clamp(2.4rem, 1.55rem + 2.7vw, 4.6rem); /* hero */
--text-headline:clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); /* section */
--leading-tight: 1.1;
--leading-snug: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
--tracking-tight: -0.02em;
--tracking-snug: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-eyebrow: 0.14em; /* uppercase eyebrows */
/* -------------------------------------------------------- */
/* 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;
--space-32: 128px;
--space-40: 160px;
/* -------------------------------------------------------- */
/* RADII — generous rounding is core to the brand */
/* -------------------------------------------------------- */
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-2xl: 40px;
--radius-pill: 999px;
--radius-circle: 50%;
/* -------------------------------------------------------- */
/* SHADOWS — soft, low-contrast, no harsh drops */
/* -------------------------------------------------------- */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
--shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.10);
--shadow-xl: 0 32px 80px rgba(15, 23, 42, 0.14);
--shadow-glow: 0 0 0 6px rgba(0, 217, 244, 0.18);
/* -------------------------------------------------------- */
/* MOTION */
/* -------------------------------------------------------- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
--duration-fast: 140ms;
--duration-base: 240ms;
--duration-slow: 420ms;
/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */
--container-narrow: 720px;
--container-base: 1080px;
--container-wide: 1280px;
--container-full: 1440px;
--grid-gutter: 24px;
}
/* ============================================================
Semantic element resets — typographic defaults
============================================================ */
html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; }
body { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--fg-2); }
h1, .h1, .display {
font-family: var(--font-display);
font-weight: var(--weight-extrabold);
font-size: var(--text-display);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg-1);
text-wrap: balance;
}
h2, .h2 {
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--text-headline);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
color: var(--fg-1);
text-wrap: balance;
}
h3, .h3 {
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--text-2xl);
line-height: 1.3;
letter-spacing: var(--tracking-snug);
color: var(--fg-1);
}
h4, .h4 {
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
font-size: var(--text-xl);
line-height: 1.35;
color: var(--fg-1);
}
h5, .h5 {
font-weight: var(--weight-semibold);
font-size: var(--text-lg);
color: var(--fg-1);
}
p, .p { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--fg-2); text-wrap: pretty; }
.lead { font-size: var(--text-xl); line-height: var(--leading-relaxed); color: var(--fg-2); font-weight: var(--weight-regular); }
.eyebrow {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--fg-3);
}
.caption { font-size: var(--text-sm); color: var(--fg-3); line-height: var(--leading-normal); }
.micro { font-size: var(--text-xs); color: var(--fg-3); }
blockquote, .pullquote {
font-family: var(--font-quote);
font-style: italic;
font-weight: var(--weight-regular);
font-size: var(--text-3xl);
line-height: 1.35;
color: var(--fg-1);
border-left: 0; /* SO never uses left bars */
padding: 0;
}
code, kbd, samp, .mono {
font-family: var(--font-mono);
font-size: 0.92em;
background: var(--bg-muted);
padding: 2px 6px;
border-radius: var(--radius-xs);
}
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }
::selection { background: var(--so-cyan-200); color: var(--fg-1); }