/* ============================================================================
AUTOBREW — Colors & Type
The production backbone for the AI era of software.
Aesthetic: warm-technical. A cream paper canvas, slate ink, a single
terracotta accent, and the node-graph motif from the logo. Calm, precise,
crafted, human. Not a cold dashboard; not a toy.
FONTS — loaded from Google Fonts. Add to (or rely on @import below):
NOTE: Lexend is the brand wordmark face. JetBrains Mono is a chosen pairing
for code / metrics / eyebrows (no codebase mono was provided — flagged).
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root {
/* ---- BRAND CORE (from the logo) ------------------------------------ */
--ab-paper: #F9F6EF; /* cream canvas — the brand background */
--ab-ink: #252F3B; /* slate — primary ink & logo edges */
--ab-terracotta: #BA5C43; /* terracotta — logo nodes, primary accent */
/* ---- NEUTRALS (warm slate grays, derived from ink) ----------------- */
--ab-ink-950: #161D26;
--ab-ink-900: #1B2330;
--ab-ink-800: #252F3B; /* = brand slate */
--ab-ink-700: #36424F;
--ab-ink-600: #4C5868; /* body on dark / strong secondary */
--ab-ink-500: #677484; /* secondary text */
--ab-ink-400: #8D98A6; /* tertiary / muted text, icons */
--ab-ink-300: #B4BCC7; /* disabled text, faint icons */
--ab-ink-200: #D7D2C6; /* strong border on paper */
--ab-ink-100: #E7E1D4; /* hairline / divider on paper */
/* ---- SURFACES ------------------------------------------------------- */
--ab-canvas: #F9F6EF; /* page background */
--ab-canvas-2: #F2ECDE; /* sunken wells, code blocks, app rails */
--ab-surface: #FFFDF8; /* cards, panels (warm white) */
--ab-surface-2: #FBF8F1; /* nested surface */
--ab-elevated: #FFFFFF; /* menus, popovers, modals */
--ab-ink-panel: #1B2330; /* dark sections / inverse surfaces */
--ab-ink-panel-2:#222C3A; /* nested dark surface */
/* ---- TERRACOTTA SCALE ---------------------------------------------- */
--ab-terra-50: #FaF0EB;
--ab-terra-100: #F2DDD3;
--ab-terra-200: #E6C0B0;
--ab-terra-300: #D79C85;
--ab-terra-400: #C97A5E;
--ab-terra-500: #BA5C43; /* = brand terracotta */
--ab-terra-600: #A24A34; /* hover */
--ab-terra-700: #843A28; /* pressed / deep */
/* ---- SUPPORTING COOL ACCENT (kelp-teal) ----------------------------
Used sparingly for links, info, and graph/data edges. Complements
terracotta; keeps the system from reading mono-warm. */
--ab-kelp-50: #E9F1EF;
--ab-kelp-100: #CFE2DE;
--ab-kelp-400: #4F968B;
--ab-kelp-500: #2C7A6F;
--ab-kelp-600: #1F635A;
--ab-kelp-700: #184E47;
/* ---- SEMANTIC (earthy, tuned to the warm palette) ------------------ */
--ab-success: #3F7D5A; --ab-success-bg: #E4F0E7; --ab-success-fg:#235E3C;
--ab-warning: #C2872B; --ab-warning-bg: #F7E9CC; --ab-warning-fg:#8A5C12;
--ab-danger: #B23A2E; --ab-danger-bg: #F6DDD8; --ab-danger-fg: #842318;
--ab-info: #2C7A6F; --ab-info-bg: #DCEDE9; --ab-info-fg: #184E47;
/* Production-readiness score bands (a core product concept) */
--ab-score-critical: #B23A2E;
--ab-score-risk: #C2872B;
--ab-score-good: #3F7D5A;
--ab-score-track: #E7E1D4;
/* ---- SEMANTIC TEXT / BORDER ---------------------------------------- */
--ab-fg-1: var(--ab-ink-800); /* primary text */
--ab-fg-2: var(--ab-ink-500); /* secondary text */
--ab-fg-3: var(--ab-ink-400); /* tertiary / muted */
--ab-fg-on-dark: #F4F1E9; /* primary on dark */
--ab-fg-on-dark-2: #AEB7C2; /* secondary on dark */
--ab-link: var(--ab-kelp-600);
--ab-border: var(--ab-ink-100);
--ab-border-strong:var(--ab-ink-200);
--ab-border-dark: rgba(244,241,233,0.12);
/* ---- TYPE FAMILIES -------------------------------------------------- */
--ab-font-sans: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
--ab-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
/* ---- TYPE SCALE (px) ----------------------------------------------- */
--ab-display-xl: 4.5rem; /* 72 — hero */
--ab-display-l: 3.5rem; /* 56 */
--ab-h1: 2.5rem; /* 40 */
--ab-h2: 2rem; /* 32 */
--ab-h3: 1.5rem; /* 24 */
--ab-h4: 1.25rem; /* 20 */
--ab-body-lg: 1.125rem; /* 18 */
--ab-body: 1rem; /* 16 */
--ab-body-sm: 0.875rem; /* 14 */
--ab-caption: 0.8125rem;/* 13 */
--ab-eyebrow: 0.75rem; /* 12 — mono uppercase */
/* ---- WEIGHTS -------------------------------------------------------- */
--ab-w-light: 300; --ab-w-regular: 400; --ab-w-medium: 500;
--ab-w-semibold: 600; --ab-w-bold: 700;
/* ---- RADII ---------------------------------------------------------- */
--ab-r-xs: 4px; --ab-r-sm: 6px; --ab-r-md: 10px; --ab-r-lg: 14px;
--ab-r-xl: 20px; --ab-r-2xl: 28px; --ab-r-pill: 999px;
/* ---- SPACING (4px base) -------------------------------------------- */
--ab-s-1: 4px; --ab-s-2: 8px; --ab-s-3: 12px; --ab-s-4: 16px;
--ab-s-5: 20px; --ab-s-6: 24px; --ab-s-8: 32px; --ab-s-10: 40px;
--ab-s-12: 48px; --ab-s-16: 64px; --ab-s-20: 80px; --ab-s-24: 96px;
/* ---- ELEVATION (warm, slate-tinted, soft) -------------------------- */
--ab-shadow-xs: 0 1px 2px rgba(37,47,59,0.06);
--ab-shadow-sm: 0 1px 3px rgba(37,47,59,0.08), 0 1px 2px rgba(37,47,59,0.04);
--ab-shadow-md: 0 6px 18px -6px rgba(37,47,59,0.12), 0 2px 6px -2px rgba(37,47,59,0.06);
--ab-shadow-lg: 0 16px 40px -12px rgba(37,47,59,0.18), 0 4px 12px -4px rgba(37,47,59,0.08);
--ab-shadow-xl: 0 28px 64px -16px rgba(27,35,48,0.26);
--ab-ring: 0 0 0 3px rgba(186,92,67,0.22); /* focus ring (terracotta) */
--ab-ring-kelp: 0 0 0 3px rgba(44,122,111,0.22);
/* ---- MOTION --------------------------------------------------------- */
--ab-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* calm ease-out */
--ab-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
--ab-dur-fast: 120ms; --ab-dur: 200ms; --ab-dur-slow: 360ms;
}
/* ============================================================================
SEMANTIC ELEMENT STYLES — opt in by adding class .ab on a container,
or copy these rules. Kept lightweight so kits can layer their own.
============================================================================ */
.ab {
font-family: var(--ab-font-sans);
color: var(--ab-fg-1);
background: var(--ab-canvas);
font-size: var(--ab-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.ab-eyebrow {
font-family: var(--ab-font-mono);
font-size: var(--ab-eyebrow);
font-weight: var(--ab-w-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ab-terra-600);
}
.ab-display-xl { font-family: var(--ab-font-sans); font-size: var(--ab-display-xl); font-weight: var(--ab-w-semibold); line-height: 1.02; letter-spacing: -0.025em; }
.ab-display-l { font-family: var(--ab-font-sans); font-size: var(--ab-display-l); font-weight: var(--ab-w-semibold); line-height: 1.05; letter-spacing: -0.022em; }
.ab-h1 { font-size: var(--ab-h1); font-weight: var(--ab-w-semibold); line-height: 1.1; letter-spacing: -0.02em; }
.ab-h2 { font-size: var(--ab-h2); font-weight: var(--ab-w-semibold); line-height: 1.15; letter-spacing: -0.018em; }
.ab-h3 { font-size: var(--ab-h3); font-weight: var(--ab-w-medium); line-height: 1.25; letter-spacing: -0.012em; }
.ab-h4 { font-size: var(--ab-h4); font-weight: var(--ab-w-medium); line-height: 1.3; letter-spacing: -0.008em; }
.ab-body-lg { font-size: var(--ab-body-lg); font-weight: var(--ab-w-regular); line-height: 1.6; }
.ab-body { font-size: var(--ab-body); font-weight: var(--ab-w-regular); line-height: 1.55; }
.ab-body-sm { font-size: var(--ab-body-sm); font-weight: var(--ab-w-regular); line-height: 1.5; }
.ab-caption { font-size: var(--ab-caption); font-weight: var(--ab-w-regular); line-height: 1.45; color: var(--ab-fg-2); }
.ab-mono { font-family: var(--ab-font-mono); font-size: var(--ab-body-sm); font-weight: var(--ab-w-regular); }
.ab-code {
font-family: var(--ab-font-mono);
font-size: var(--ab-body-sm);
background: var(--ab-canvas-2);
border: 1px solid var(--ab-border);
border-radius: var(--ab-r-sm);
padding: 0.1em 0.4em;
color: var(--ab-ink-700);
}
a.ab-link, .ab-link { color: var(--ab-link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ab-link) 32%, transparent); transition: border-color var(--ab-dur) var(--ab-ease); }
a.ab-link:hover { border-bottom-color: var(--ab-link); }
::selection { background: var(--ab-terra-200); color: var(--ab-ink-900); }