/* =========================================================
GRUG Group — Colors & Type Tokens
Aerospace / Advanced Air Mobility
========================================================= */
/* ---- Fonts (Google Fonts; load in ) ----------------
Recommended tags:
--------------------------------------------------------- */
:root {
/* ============ COLOR — BRAND ============ */
/* PRIMARY — Electric Cobalt (boosted saturation for 2026 contrast) */
--grug-blue-50: #E8F1FE;
--grug-blue-100: #C7DDFB;
--grug-blue-200: #8FBCF6;
--grug-blue-300: #5DA0F2;
--grug-blue-400: #2C7CEC;
--grug-blue-500: #0F66E0; /* CORE brand blue (slightly punchier) */
--grug-blue-600: #0B52BD;
--grug-blue-700: #083F94;
--grug-blue-800: #062C6A;
--grug-blue-900: #041B43;
/* HYPER-ACCENT — electric cyan for tiny highlights (links, hover ticks) */
--grug-cyan-glow: #19E5FF;
/* DEEP NAVY — under-shadow / hero bg accent */
--grug-navy-700: #0A1F4A;
--grug-navy-800: #061235;
--grug-navy-900: #03071F;
/* CHROME / PLATINUM — wordmark, metallic fuselage accents */
--chrome-100: #F4F6FA;
--chrome-200: #DCE2EC;
--chrome-300: #B8C2D3;
--chrome-400: #8C97AC;
--chrome-500: #5F6A82;
--chrome-gradient: linear-gradient(180deg, #FFFFFF 0%, #DCE2EC 35%, #8C97AC 65%, #F4F6FA 100%);
/* Legacy aliases — older SBX cyan kept for back-compat */
--grug-cyan-300: #4F95EE;
--grug-cyan-400: var(--grug-blue-500);
/* Secondary — SBX red (product/sub-brand mark) */
--sbx-red-400: #FF2A3C;
--sbx-red-500: #E40521; /* core SBX red */
--sbx-red-600: #B6041A;
--sbx-red-700: #870212;
/* ============ COLOR — NEUTRAL "Carbon" ============ */
/* Deep aerospace blacks; cool-leaning grays */
--carbon-0: #FFFFFF;
--carbon-50: #F5F7FA;
--carbon-100: #E6EAF0;
--carbon-200: #C9D1DC;
--carbon-300: #94A0B2;
--carbon-400: #5B6677;
--carbon-500: #353C48;
--carbon-600: #1F242D;
--carbon-700: #141822;
--carbon-800: #0C0F16;
--carbon-900: #06080C; /* deep space */
/* ============ COLOR — SEMANTIC ============ */
--color-bg: var(--carbon-900); /* default page = deep space */
--color-bg-elev-1: var(--carbon-800);
--color-bg-elev-2: var(--carbon-700);
--color-bg-panel: var(--carbon-600);
--color-surface: var(--carbon-0); /* light surface for content blocks */
--color-fg-1: var(--carbon-0); /* primary on dark */
--color-fg-2: #BFC8D6; /* secondary on dark */
--color-fg-3: #7E899C; /* muted on dark */
--color-fg-inv-1: var(--carbon-900); /* primary on light */
--color-fg-inv-2: var(--carbon-500);
--color-accent: var(--grug-blue-500);
--color-accent-hover: var(--grug-blue-400);
--color-accent-press: var(--grug-blue-600);
--color-accent-soft: rgba(26, 102, 214, 0.14);
--color-accent-glow: 0 0 28px rgba(37, 117, 226, 0.55);
--color-danger: var(--sbx-red-500);
--color-warn: #F5A524;
--color-ok: #19C37D;
--color-info: var(--grug-blue-500);
--color-border: rgba(255, 255, 255, 0.08);
--color-border-strong: rgba(255, 255, 255, 0.18);
--color-border-inv: var(--carbon-100);
/* Hairline borders that pick up brand accent on hover/focus */
--color-border-accent: var(--grug-blue-500);
/* ============ TYPE — FAMILIES (2026 modern) ============ */
--font-display: "Space Grotesk", "Saira", ui-sans-serif, system-ui, sans-serif;
--font-body: "Inter", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* ============ TYPE — SIZE SCALE ============ */
/* Tight, industrial scale. Display is wide + heavy. */
--fs-xs: 12px;
--fs-sm: 14px;
--fs-base: 16px;
--fs-md: 18px;
--fs-lg: 22px;
--fs-xl: 28px;
--fs-2xl: 36px;
--fs-3xl: 48px;
--fs-4xl: 64px;
--fs-5xl: 84px;
--fs-6xl: 112px;
--lh-tight: 1.02;
--lh-snug: 1.15;
--lh-base: 1.5;
--lh-loose: 1.7;
/* Tracking — display tracks tight; eyebrows/labels track wide */
--tracking-display: -0.01em;
--tracking-body: 0em;
--tracking-label: 0.18em; /* uppercase labels / eyebrows */
--tracking-wide: 0.28em; /* large eyebrows over hero */
/* ============ SPACING / RADIUS / SHADOW ============ */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-pill: 999px;
/* Shadows lean dark+cool, not warm */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
--shadow-md: 0 8px 24px rgba(0,0,0,0.45);
--shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
--shadow-glow:0 0 28px rgba(37,117,226,0.50);
--shadow-chrome: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 24px rgba(3,7,31,0.6);
/* Motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in: cubic-bezier(0.55, 0, 0.68, 0);
--dur-fast: 140ms;
--dur-base: 240ms;
--dur-slow: 500ms;
}
/* =========================================================
SEMANTIC TYPE — drop-in element styles
Use as classes (.h1, .eyebrow, .data) or extend.
========================================================= */
.display, .h0 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(56px, 8vw, var(--fs-6xl));
line-height: var(--lh-tight);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--color-fg-1);
}
.h1 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(40px, 5.5vw, var(--fs-4xl));
line-height: var(--lh-tight);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--color-fg-1);
}
.h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(28px, 3.5vw, var(--fs-3xl));
line-height: var(--lh-snug);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--color-fg-1);
}
.h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-2xl);
line-height: var(--lh-snug);
letter-spacing: 0;
color: var(--color-fg-1);
}
.h4 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-xl);
line-height: var(--lh-snug);
color: var(--color-fg-1);
}
.eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-xs);
line-height: 1;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-accent);
}
.eyebrow-lg {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-sm);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-accent);
}
.p, p {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--color-fg-2);
}
.p-lead {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-md);
line-height: var(--lh-base);
color: var(--color-fg-1);
}
.p-sm {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-sm);
line-height: var(--lh-base);
color: var(--color-fg-2);
}
.caption {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--fs-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-fg-3);
}
/* Numeric / spec readouts — used for telemetry, specs, stats */
.data, .stat {
font-family: var(--font-mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
color: var(--color-fg-1);
}
.stat-xl {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-4xl);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--color-fg-1);
}
code, kbd, .code {
font-family: var(--font-mono);
font-size: 0.92em;
color: var(--grug-cyan-300);
}
/* Default reset for design surfaces */
body.grug-surface {
background: var(--color-bg);
color: var(--color-fg-1);
font-family: var(--font-body);
margin: 0;
-webkit-font-smoothing: antialiased;
}