/* =========================================================================
KELTRA CAPITAL — Design Tokens
colors_and_type.css
Load with the Google Fonts links at top of any HTML file, or import this
stylesheet directly. All values are exposed as CSS custom properties so
they can be themed per-surface (e.g. dark mode in the portal).
========================================================================= */
/* ---------- Fonts (Google Fonts CDN) ----------
NOTE TO USER: These are Google Fonts substitutes for the intended licensed
faces. If real licensed faces exist (e.g. GT Sectra for display, Söhne for
text, Söhne Mono for data), replace via @font-face in fonts/ and update
the families below. Flagged so you can swap when ready.
-------------------------------------------------- */
:root {
/* -------- Color: raw scale --------
A single palette. Semantic aliases below.
Forest green is the primary chroma; brass is the accent. */
--ivory-50: #FBF8F1; /* page background, warmest */
--ivory-100: #F4EDDE; /* card / hero background */
--ivory-200: #E9DFC9; /* divider on ivory */
--ivory-300: #D9CBA8; /* hover on ivory */
--forest-900: #0E2A22; /* primary brand, near-black green */
--forest-800: #14392E; /* default forest */
--forest-700: #1B4A3B; /* hover */
--forest-600: #2C5F4E; /* active / pressed lighter */
--forest-500: #4A7C6A; /* muted forest */
--forest-200: #B8CDC2; /* subtle tint backgrounds */
--brass-700: #8C6A2F; /* hover state for brass */
--brass-600: #A88542; /* default brass — accents, dividers, marks */
--brass-500: #B89758; /* lighter brass — large surfaces */
--brass-300: #D9C28C; /* pale brass — fills, badges */
--graphite-950: #0B0B0A; /* near-black, for body text on ivory */
--graphite-900: #1A1A18; /* default text */
--graphite-700: #3A3A35; /* secondary text */
--graphite-500: #6E6E66; /* tertiary text */
--graphite-300: #B4B3AB; /* dividers on white */
--graphite-200: #D6D4CB; /* subtle dividers */
--graphite-100: #ECEAE3; /* off-white surfaces */
--paper: #FFFFFF; /* pure white, used sparingly (data tables, portal) */
--ink: #0B0B0A; /* pure ink */
/* Data / semantic accents — restrained, used in tables + charts only */
--data-positive: #2F6E4E; /* gains, up */
--data-negative: #8C2F2A; /* losses, down */
--data-neutral: #6E6E66;
--data-warn: #A88542;
/* -------- Color: semantic aliases -------- */
--bg: var(--ivory-50);
--bg-card: var(--ivory-100);
--bg-inset: var(--graphite-100);
--bg-elevated: var(--paper);
--bg-brand: var(--forest-900);
--fg: var(--graphite-900);
--fg-muted: var(--graphite-700);
--fg-subtle: var(--graphite-500);
--fg-on-brand: var(--ivory-100);
--fg-accent: var(--brass-600);
--border: var(--graphite-200);
--border-strong: var(--graphite-300);
--border-brand: var(--forest-800);
--rule: var(--brass-600); /* the brass hairline used in headers */
/* -------- Type: families -------- */
--font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
--font-text: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* -------- Type: scale (clamped for fluid sizing where useful) -------- */
--fs-display-xl: 84px; /* hero headline, marketing only */
--fs-display-l: 64px;
--fs-display-m: 48px;
--fs-h1: 36px;
--fs-h2: 28px;
--fs-h3: 22px;
--fs-h4: 18px;
--fs-body-l: 19px; /* lede paragraphs */
--fs-body: 16px; /* default body */
--fs-body-s: 14px;
--fs-caption: 13px;
--fs-micro: 11px; /* eyebrows, labels */
/* -------- Type: weights -------- */
--fw-light: 300; /* @kind font */
--fw-reg: 400; /* @kind font */
--fw-med: 500; /* @kind font */
--fw-sb: 600; /* @kind font */
--fw-bold: 700; /* @kind font */
/* -------- Type: leading -------- */
--lh-tight: 1.05; /* @kind font */
--lh-snug: 1.2; /* @kind font */
--lh-normal: 1.45; /* @kind font */
--lh-loose: 1.6; /* @kind font */
/* -------- Type: tracking -------- */
--tr-tighter: -0.025em; /* @kind font */
--tr-tight: -0.012em; /* @kind font */
--tr-normal: 0; /* @kind font */
--tr-eyebrow: 0.16em; /* @kind font */
--tr-caps: 0.04em; /* @kind font */
/* -------- Spacing scale (4px base) -------- */
--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;
/* -------- Radii (intentionally restrained) -------- */
--radius-none: 0px;
--radius-sm: 2px; /* default — almost-square */
--radius-md: 4px;
--radius-lg: 8px; /* used for media + photos only */
--radius-pill: 999px; /* tag pills, sparingly */
/* -------- Borders -------- */
--bw-hair: 0.5px;
--bw-thin: 1px;
--bw-med: 2px;
/* -------- Shadows (very subtle; we lean on rules + ivory, not elevation) -------- */
--shadow-1: 0 1px 0 rgba(20, 57, 46, 0.08), 0 1px 3px rgba(20, 57, 46, 0.04);
--shadow-2: 0 2px 6px rgba(20, 57, 46, 0.06), 0 8px 24px rgba(20, 57, 46, 0.05);
--shadow-3: 0 12px 40px rgba(11, 42, 34, 0.10);
--shadow-inset: inset 0 0 0 1px rgba(20, 57, 46, 0.08);
/* -------- Motion -------- */
--ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); /* @kind other */
--ease-emphatic: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur-base: 200ms; /* @kind other */
--dur-slow: 420ms; /* @kind other */
/* -------- Layout -------- */
--container-max: 1280px; /* @kind spacing */
--container-prose: 680px; /* @kind spacing */
--grid-cols: 12; /* @kind other */
--grid-gutter: 24px; /* @kind spacing */
}
/* =========================================================================
Semantic typography styles. Apply via class or by re-using the variables.
========================================================================= */
.k-eyebrow {
font-family: var(--font-text);
font-size: var(--fs-micro);
font-weight: var(--fw-med);
letter-spacing: var(--tr-eyebrow);
text-transform: uppercase;
color: var(--fg-accent);
}
.k-display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: var(--fw-light); line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); color: var(--fg); }
.k-display-l { font-family: var(--font-display); font-size: var(--fs-display-l); font-weight: var(--fw-light); line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); color: var(--fg); }
.k-display-m { font-family: var(--font-display); font-size: var(--fs-display-m); font-weight: var(--fw-reg); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--fg); }
.k-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-reg); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--fg); }
.k-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-reg); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--fg); }
.k-h3 { font-family: var(--font-text); font-size: var(--fs-h3); font-weight: var(--fw-med); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--fg); }
.k-h4 { font-family: var(--font-text); font-size: var(--fs-h4); font-weight: var(--fw-med); line-height: var(--lh-normal); letter-spacing: var(--tr-normal); color: var(--fg); }
.k-lede {
font-family: var(--font-display);
font-size: var(--fs-body-l);
font-weight: var(--fw-reg);
line-height: var(--lh-loose);
font-style: italic;
color: var(--fg-muted);
}
.k-body { font-family: var(--font-text); font-size: var(--fs-body); font-weight: var(--fw-reg); line-height: var(--lh-loose); color: var(--fg); }
.k-body-s{ font-family: var(--font-text); font-size: var(--fs-body-s); font-weight: var(--fw-reg); line-height: var(--lh-normal); color: var(--fg-muted); }
.k-caption{ font-family: var(--font-text); font-size: var(--fs-caption); font-weight: var(--fw-reg); line-height: var(--lh-normal); color: var(--fg-subtle); }
.k-mono { font-family: var(--font-mono); font-size: var(--fs-body-s); font-weight: var(--fw-reg); letter-spacing: 0; color: var(--fg); font-variant-numeric: tabular-nums; }
.k-figure{ font-family: var(--font-display); font-weight: var(--fw-light); font-variant-numeric: tabular-nums; letter-spacing: var(--tr-tight); }
.k-label {
font-family: var(--font-text);
font-size: var(--fs-micro);
font-weight: var(--fw-med);
letter-spacing: var(--tr-caps);
text-transform: uppercase;
color: var(--fg-muted);
}
/* =========================================================================
Base resets used across kits + slides
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-text);
font-size: var(--fs-body);
line-height: var(--lh-loose);
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--brass-600); }
a:hover { text-decoration-color: var(--forest-800); }
::selection { background: var(--brass-300); color: var(--ink); }
/* The signature brass hairline used in headers + section breaks */
.k-rule {
border: 0;
height: 1px;
background: var(--brass-600);
margin: 0;
}
.k-rule-hair {
border: 0;
height: 1px;
background: var(--border);
margin: 0;
}