/* ============================================================
COSTELLO — DESIGN SYSTEM TOKENS
Clean, confident, modern AI/automation brand.
Black-on-white authority + one electric blue accent.
============================================================ */
/* Inter — loaded from Google Fonts in HTML :
*/
:root {
/* ---- COLOR TOKENS ------------------------------------ */
--bg-base: #FFFFFF; /* page background */
--bg-subtle: #F5F5F5; /* alternating section bands, cards */
--text-primary: #0A0A0A; /* near-black, headings + body */
--text-muted: #6B6B6B; /* sub-copy, captions, labels */
--border-hairline:#E6E6E6; /* 1px dividers, card borders */
--accent-primary: #0EA5E9; /* single electric blue — links, CTAs */
--accent-hover: #0284C7; /* darker blue for hover */
/* ONE accent only. Do not introduce secondary colours. */
/* Convenience overlays derived from the accent */
--accent-tint: #E0F2FE; /* soft teal-blue wash for fills */
--on-accent: #FFFFFF; /* text on accent surfaces */
--accent-glow: 0 0 0 1px rgba(14,165,233,0.18), 0 6px 22px rgba(14,165,233,0.28); /* soft electric halo */
/* ---- TYPE FAMILY ------------------------------------- */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo,
Consolas, monospace;
/* ---- TYPE SCALE (role tokens) ------------------------ */
/* Hero / display */
--hero-size: 72px; /* clamp in use: 48–80px */
--hero-weight: 800;
--hero-tracking:-0.03em;
--hero-leading: 1.05;
/* Section heading */
--section-size: 44px;
--section-weight: 700;
--section-tracking:-0.02em;
--section-leading: 1.1;
/* Card title */
--card-title-size: 20px;
--card-title-weight: 600;
--card-title-leading:1.3;
/* Body */
--body-size: 17px;
--body-weight: 400;
--body-leading: 1.6;
/* Kicker / eyebrow */
--kicker-size: 13px;
--kicker-weight: 600;
--kicker-tracking:0.08em;
/* Stat number */
--stat-size: 56px;
--stat-weight: 800;
--stat-tracking:-0.02em;
/* ---- SPACING (8px scale) ----------------------------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12:48px;
--space-16:64px;
--space-24:96px;
--space-32:128px;
/* Layout */
--content-max: 1160px; /* 1100–1200 centered */
--gutter: 24px;
--section-pad-y: 112px; /* desktop; 56px mobile */
/* ---- RADII ------------------------------------------- */
--radius-sm: 8px; /* inputs, small chips */
--radius-md: 12px; /* cards */
--radius-lg: 16px; /* large panels */
--radius-pill:999px; /* buttons, badges */
/* ---- SHADOWS (subtle only) --------------------------- */
--shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
--shadow-hover: 0 4px 12px rgba(0,0,0,0.08);
/* ---- MOTION ------------------------------------------ */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
}
/* ============================================================
SEMANTIC ELEMENT STYLES
Thin layer mapping the role tokens onto HTML elements.
Opt-in by using these classes (or copy into your own rules).
============================================================ */
.ds-hero {
font-family: var(--font-sans);
font-size: clamp(48px, 6vw, var(--hero-size));
font-weight: var(--hero-weight);
letter-spacing: var(--hero-tracking);
line-height: var(--hero-leading);
color: var(--text-primary);
text-wrap: balance;
}
.ds-section-title {
font-family: var(--font-sans);
font-size: clamp(32px, 4vw, var(--section-size));
font-weight: var(--section-weight);
letter-spacing: var(--section-tracking);
line-height: var(--section-leading);
color: var(--text-primary);
text-wrap: balance;
}
.ds-card-title {
font-family: var(--font-sans);
font-size: var(--card-title-size);
font-weight: var(--card-title-weight);
line-height: var(--card-title-leading);
color: var(--text-primary);
}
.ds-body {
font-family: var(--font-sans);
font-size: var(--body-size);
font-weight: var(--body-weight);
line-height: var(--body-leading);
color: var(--text-primary);
text-wrap: pretty;
}
.ds-body--muted { color: var(--text-muted); }
.ds-kicker {
font-family: var(--font-sans);
font-size: var(--kicker-size);
font-weight: var(--kicker-weight);
letter-spacing: var(--kicker-tracking);
text-transform: uppercase;
color: var(--text-muted);
}
.ds-stat {
font-family: var(--font-sans);
font-size: clamp(40px, 5vw, var(--stat-size));
font-weight: var(--stat-weight);
letter-spacing: var(--stat-tracking);
line-height: 1;
color: var(--text-primary);
}
.ds-stat--accent { color: var(--accent-primary); }
a {
color: var(--accent-primary);
text-decoration: none;
transition: color var(--dur-base) var(--ease-standard);
}
a:hover { color: var(--accent-hover); }
/* ---- BUTTONS ------------------------------------------- */
.ds-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
padding: 14px 28px;
border-radius: var(--radius-pill);
border: 1px solid transparent;
cursor: pointer;
transition: background var(--dur-base) var(--ease-standard),
transform var(--dur-base) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard);
}
.ds-btn--primary {
background: var(--accent-primary);
color: var(--on-accent);
}
.ds-btn--primary:hover {
background: var(--accent-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-hover);
}
.ds-btn--secondary {
background: var(--bg-base);
color: var(--text-primary);
border-color: var(--border-hairline);
}
.ds-btn--secondary:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-hover);
}
/* ---- CARD ---------------------------------------------- */
.ds-card {
background: var(--bg-base);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: var(--space-8);
transition: box-shadow var(--dur-base) var(--ease-standard),
transform var(--dur-base) var(--ease-standard);
}
.ds-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
/* ---- FORM INPUT ---------------------------------------- */
.ds-input {
font-family: var(--font-sans);
font-size: 16px;
color: var(--text-primary);
background: var(--bg-subtle);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-sm);
padding: 12px 16px;
outline: none;
transition: border-color var(--dur-base) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard);
}
.ds-input::placeholder { color: var(--text-muted); }
.ds-input:focus {
border-color: var(--accent-primary);
box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.35);
}
/* ---- BADGE / CHIP -------------------------------------- */
.ds-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
padding: 6px 14px;
border-radius: var(--radius-pill);
background: var(--accent-tint);
color: var(--accent-primary);
}
* { box-sizing: border-box; }