/* ============================================================================
ABERDEEN INDUSTRIES — Colors & Type Foundations
"Security Without Theater"
----------------------------------------------------------------------------
Single source of truth for color + type tokens. Import into any artifact:
Brand fonts: Hanken Grotesk (brand/body) + IBM Plex Mono (data/labels).
Accent: fuchsia primary, cyan secondary; copper is reserved for documents.
============================================================================ */
/* Fonts are loaded via a in each page's (with preconnect), not a
render-blocking @import here — keeps the CSS from serializing a second fetch. */
:root {
/* ---- BRAND CORE (from aberdeen_palette) ------------------------------- */
--ab-black: #05070B; /* Rich Black — primary canvas, ink on light */
--ab-brown: #5A3A20; /* Newfoundland Brown — secondary / depth */
--ab-darkbrown: #341F10; /* Dark Brown — deep accents */
--ab-copper: #B56A2A; /* Copper — RESERVED for documents / reports */
--ab-fuchsia: #FF2D95; /* Primary accent — brand-wide */
--ab-cyan: #33CDBE; /* Secondary accent / data */
--ab-silver: #9CA0A6; /* Silver — secondary text, the shield */
--ab-white: #F4F5F6; /* White — text on dark, light surfaces */
/* ---- EXTENDED NEUTRALS (derived from the document templates) ---------- */
/* A cool charcoal ramp that sits between Rich Black and Silver. Used for
dark-UI surfaces, borders, and ink on light pages. */
--ab-ink: #14171C; /* near-black panel / elevated dark surface */
--ab-ink-2: #1B1F26; /* card on dark */
--ab-line-dark: #23272E; /* hairline on dark (from SOW signature rule) */
--ab-slate: #4A4F57; /* muted ink on light (from quote meta text) */
--ab-line: #DDE0E3; /* hairline on light (from quote table rule) */
--ab-row: #F2F3F5; /* zebra row / subtle fill on light */
--ab-paper: #FFFFFF; /* document paper white */
/* ---- COPPER TINTS ----------------------------------------------------- */
--ab-copper-bright: #D2823C; /* hover / lit copper */
--ab-copper-deep: #93531F; /* pressed / shadowed copper */
--ab-copper-08: rgba(181,106,42,0.08);
--ab-copper-16: rgba(181,106,42,0.16);
--ab-copper-32: rgba(181,106,42,0.32);
/* ---- FUCHSIA + CYAN TINTS (primary/secondary accents) ---------------- */
--ab-fuchsia-bright: #FF54AC; /* hover / lit */
--ab-fuchsia-deep: #D31E79; /* pressed / shadowed */
--ab-fuchsia-08: rgba(255,45,149,0.10);
--ab-fuchsia-16: rgba(255,45,149,0.18);
--ab-fuchsia-32: rgba(255,45,149,0.32);
--ab-cyan-16: rgba(51,205,190,0.18);
--ab-cyan-32: rgba(51,205,190,0.34);
/* ---- SEVERITY (security findings) ------------------------------------- */
/* Tuned to live on Rich Black panels. Copper = High by brand convention. */
--sev-critical: #D14545; /* critical */
--sev-high: #B56A2A; /* high (brand copper) */
--sev-medium: #C9A227; /* medium */
--sev-low: #5E8C6A; /* low */
--sev-info: #5C7A99; /* informational */
/* ============================ SEMANTIC ================================= */
/* DARK THEME (default — the brand lives on Rich Black) ------------------ */
--bg: var(--ab-black);
--bg-elev: var(--ab-ink);
--bg-card: var(--ab-ink-2);
--fg1: var(--ab-white); /* primary text on dark */
--fg2: var(--ab-silver); /* secondary text on dark */
--fg3: #6B7077; /* tertiary / disabled on dark */
--line: var(--ab-line-dark);
--accent: var(--ab-fuchsia); /* primary accent — brand-wide */
--accent-2: var(--ab-cyan); /* secondary accent / data */
--accent-fg: var(--ab-white); /* text on accent */
--focus: var(--ab-fuchsia-bright);
/* LIGHT THEME (documents, light web sections) — apply .on-light --------- */
--l-bg: var(--ab-paper);
--l-bg-soft: var(--ab-row);
--l-fg1: var(--ab-black);
--l-fg2: var(--ab-slate);
--l-fg3: #8A8F96;
--l-line: var(--ab-line);
/* ============================ TYPE ===================================== */
--font-brand: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
/* Type scale (1.250 major-third, 16px base) ----------------------------- */
--t-display: 700 clamp(44px, 6vw, 76px)/1.04 var(--font-brand);
--t-h1: 700 clamp(34px, 4vw, 52px)/1.08 var(--font-brand);
--t-h2: 700 clamp(26px, 3vw, 36px)/1.14 var(--font-brand);
--t-h3: 600 22px/1.25 var(--font-brand);
--t-h4: 600 18px/1.3 var(--font-brand);
--t-body: 400 16px/1.6 var(--font-body);
--t-body-sm: 400 14px/1.55 var(--font-body);
--t-kicker: 600 12px/1.2 var(--font-mono); /* ALL CAPS, letterspaced */
--t-meta: 400 12px/1.5 var(--font-mono);
--t-code: 400 14px/1.6 var(--font-mono);
/* Letter-spacing tokens ------------------------------------------------- */
--ls-display: -0.01em;
--ls-wordmark: 0.06em; /* the ABERDEEN wordmark feel */
--ls-kicker: 0.18em; /* kickers / labels */
--ls-industries: 0.42em; /* the "— I N D U S T R I E S —" treatment */
/* ---- RADII ------------------------------------------------------------ */
--r-sm: 4px;
--r-md: 8px;
--r-lg: 12px;
--r-xl: 16px;
--r-pill: 999px;
/* ---- SPACING (4px base) ----------------------------------------------- */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
--s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
/* ---- ELEVATION -------------------------------------------------------- */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
--shadow-md: 0 6px 20px rgba(0,0,0,0.45);
--shadow-lg: 0 18px 50px rgba(0,0,0,0.55);
--ring-copper: 0 0 0 1px var(--ab-copper-32), 0 0 24px var(--ab-copper-16);
/* ---- MOTION ----------------------------------------------------------- */
--ease: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur: 200ms; /* @kind other */
--dur-slow: 360ms; /* @kind other */
}
/* ============================ SEMANTIC ELEMENT DEFAULTS =================== */
.ab-display { font: var(--t-display); letter-spacing: var(--ls-display); color: var(--fg1); margin: 0; }
.ab-h1 { font: var(--t-h1); color: var(--fg1); margin: 0; }
.ab-h2 { font: var(--t-h2); color: var(--fg1); margin: 0; }
.ab-h3 { font: var(--t-h3); color: var(--fg1); margin: 0; }
.ab-h4 { font: var(--t-h4); color: var(--fg1); margin: 0; }
.ab-body { font: var(--t-body); color: var(--fg2); margin: 0; }
.ab-body-sm { font: var(--t-body-sm); color: var(--fg2); margin: 0; }
/* Kicker / label — the copper, mono, letterspaced caps used everywhere */
.ab-kicker {
font: var(--t-kicker);
letter-spacing: var(--ls-kicker);
text-transform: uppercase;
color: var(--accent);
margin: 0;
}
.ab-meta { font: var(--t-meta); letter-spacing: 0.04em; color: var(--fg2); margin: 0; }
.ab-code { font: var(--t-code); color: var(--fg1); }
/* The wordmark treatment: ABERDEEN / — I N D U S T R I E S — */
.ab-wordmark {
font-family: var(--font-brand);
font-weight: 700;
letter-spacing: var(--ls-wordmark);
text-transform: uppercase;
color: var(--fg1);
line-height: 1;
}
.ab-wordmark .sub {
display: block;
font-weight: 600;
font-size: 0.34em;
letter-spacing: var(--ls-industries);
color: var(--accent);
margin-top: 0.45em;
}
/* The short accent underline used beneath titles */
.ab-rule {
display: inline-block;
width: 56px;
height: 3px;
background: var(--accent);
border: 0;
}
/* Light-surface override */
.on-light {
--bg: var(--l-bg);
--bg-elev: var(--l-bg-soft);
--bg-card: var(--ab-paper);
--fg1: var(--l-fg1);
--fg2: var(--l-fg2);
--fg3: var(--l-fg3);
--line: var(--l-line);
}