/* ============================================================================
SurvivalKnife — Design System Tokens
colors_and_type.css
Single source of truth for color + type across the SurvivalKnife brand.
Two layers live here:
1. BRAND (canonical, go-live marketing site): midnight navy chrome +
Columbia Blue accent + sage (emblem only). Fonts: Inter + Orbitron.
2. APP (ReadyMindAI "Columbia River" direction): navy chrome, lantern
amber accent, light canvas. Font: Inter (app uses system fonts on
device; Inter stands in for previews). Scoped under [data-surface="app"].
Load Google Fonts before this file:
============================================================================ */
/* ---- @font-face registration (families kept verbatim; the marketing pages
also load these via . These declarations register the SAME families
for the design-system compiler — no substitution. Replace the src URLs with
uploaded/self-hosted files when available.) -------------------------------- */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hjp-Ek-_EeA.woff2') format('woff2');
}
@font-face {
font-family: 'Orbitron';
font-style: normal;
font-weight: 600 900;
font-display: swap;
src: url('https://fonts.gstatic.com/s/orbitron/v31/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6xpmIyXjU1pg.woff2') format('woff2');
}
:root {
/* ---- SURFACES — dark-mode chrome (canonical brand) -------------------- */
--midnight: #030B1B; /* page background, deepest surface */
--navy: #091B3C; /* secondary surface */
--navy-soft: #132952; /* cards, hover states */
--navy-elevated: #1A3266; /* elevated cards */
/* ---- BRAND BLUE — Columbia Blue (sampled from the emblem's river) ----- */
--primary-blue: #70B0E8; /* CTAs, links, eyebrows, focus rings */
--primary-blue-hi: #8AC2F0; /* hover / active */
--blue-soft: #E8F4FE; /* pale-blue panel/chip backgrounds */
--panel-blue-grey: #F1F4F9; /* light card/panel surface */
--line-blue-grey: #DBE3ED; /* borders / dividers (light theme) */
/* alias kept for legacy markup */
--sky: #70B0E8;
/* ---- BRAND SAGE — emblem accent ONLY (never chrome) ------------------- */
--emblem-sage: #8EA877; /* emblem sage + trust "ready" dots */
--pine-sage: #607D55; /* secondary emblem sage (back-pines/range) */
/* ---- TEXT ON DARK ----------------------------------------------------- */
--ink: #F1F4F9; /* primary text on dark */
--ink-2: rgba(241,244,249,0.78); /* secondary / lede */
--ink-3: rgba(241,244,249,0.55); /* tertiary / footer meta */
--ink-faint: #94A3B5; /* muted blue-grey labels */
/* text on light inset panels */
--ink-dark: #0A1929;
--ink-dark-2: #2E3B5C;
--ink-dark-3: #5A6B85;
/* ---- STATUS ----------------------------------------------------------- */
--success: #6EBE6E; /* ready / online indicators */
--danger: #C97A6A; /* destructive / error */
/* ---- BORDERS (on dark) ------------------------------------------------ */
--border: rgba(112,176,232,0.14);
--border-strong: rgba(112,176,232,0.28);
--border-soft: rgba(241,244,249,0.06);
/* ---- TYPE FAMILIES ---------------------------------------------------- */
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Orbitron', 'Inter', system-ui, sans-serif; /* wordmark only */
/* ---- TYPE SCALE (fluid) ----------------------------------------------- */
--fs-wordmark: clamp(32px, 6vw, 56px); /* @kind font */ /* Orbitron 800, ls 0.02em */
--fs-h1: clamp(36px, 5.6vw, 56px); /* @kind font */ /* Inter 800, lh 1.06 */
--fs-section: clamp(26px, 3.4vw, 36px); /* @kind font */ /* Inter 800 */
--fs-lede: clamp(16px, 1.7vw, 19px); /* @kind font */ /* Inter 400, lh 1.6 */
--fs-body: 16px; /* Inter 400, lh 1.55–1.65 */
--fs-small: 14px;
--fs-eyebrow: 11px; /* uppercase, ls 0.28–0.32em*/
--lh-tight: 1.1; /* @kind font */
--lh-body: 1.6; /* @kind font */
/* ---- SHAPE ------------------------------------------------------------ */
--radius-sm: 10px;
--radius: 14px;
--radius-lg: 22px;
--radius-pill: 100px;
/* ---- SPACING (8px base; section rhythm at 96px desktop) --------------- */
--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;
--section-pad: 96px;
/* ---- LAYOUT WIDTHS ---------------------------------------------------- */
--container: 1100px;
--container-narrow: 780px;
/* ---- ELEVATION -------------------------------------------------------- */
--shadow-card: 0 16px 36px -16px rgba(112,176,232,0.45);
--shadow-cta: 0 10px 28px -8px rgba(112,176,232,0.65), inset 0 1px 0 rgba(255,255,255,0.12);
--shadow-modal: 0 24px 72px rgba(3,11,27,0.55);
/* ---- MOTION ----------------------------------------------------------- */
--ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
--dur-fast: 160ms; /* @kind other */
--dur: 200ms; /* @kind other */
--dur-slow: 400ms; /* @kind other */
}
/* ============================================================================
SEMANTIC ELEMENT DEFAULTS (canonical dark brand)
Apply via the cascade or copy the rules you need.
============================================================================ */
.sk-eyebrow {
display: inline-block;
font: 700 var(--fs-eyebrow)/1.3 var(--font-body);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--primary-blue);
}
.sk-wordmark {
font-family: var(--font-display);
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ink);
}
h1, .sk-h1 {
font: 800 var(--fs-h1)/var(--lh-tight) var(--font-body);
letter-spacing: -0.02em;
color: var(--ink);
}
h2, .sk-h2 {
font: 800 var(--fs-section)/1.16 var(--font-body);
letter-spacing: -0.015em;
color: var(--ink);
}
.sk-lede {
font: 400 var(--fs-lede)/var(--lh-body) var(--font-body);
color: var(--ink-2);
}
.sk-body {
font: 400 var(--fs-body)/1.65 var(--font-body);
color: var(--ink-2);
}
code, .sk-code {
font-family: 'SF Mono', ui-monospace, Menlo, Monaco, monospace;
font-size: 0.92em;
}
/* ============================================================================
APP LAYER — ReadyMindAI "Columbia River" direction
Navy chrome shell, lantern-amber accent, light canvas content.
Scope a subtree with data-surface="app" to pick these up.
Icon system: Lucide (https://lucide.dev) at stroke-width 2.
============================================================================ */
[data-surface="app"] {
/* dark shell */
--app-bg: #0A1929; /* gorge-night — sidebar, deepest surface */
--app-bg-alt: #071422;
--app-deep: #102A42; /* topbar, panel backgrounds */
--app-surface: #163A5A; /* elevated dark surface, active nav */
--app-surface-2: #1E4A73;
/* light canvas (main content) */
--app-canvas: #F4F7FA; /* page / chat background */
--app-elevated: #FFFFFF; /* cards, inputs, modals */
--app-subtle: #EDF2F7; /* hover, alternating rows, chips */
--app-quiet: #E2EAF3; /* dividers, inactive */
/* river blue — supporting tone (links, focus, secondary) */
--app-river: #2C7DA0;
--app-river-d: #1E5E7C;
--app-river-light: #61A5C2;
--app-river-sft: rgba(44,125,160,0.18);
/* lantern amber — THE accent (primary CTAs, active, wordmark "AI") */
--app-amber: #F2A65A;
--app-amber-d: #DF8F42;
--app-amber-sft: rgba(242,166,90,0.14);
--app-amber-fg: #0A1929; /* dark text on amber for AA contrast */
/* text on light */
--app-ink: #0A1929;
--app-ink-2: #2E3B5C;
--app-ink-3: #5A6B85;
--app-ink-4: #8896A8;
--app-ink-5: #B3BDCC;
/* text on dark */
--app-ink-on-dark: #F0F4F8;
--app-ink-on-dark-2: rgba(240,244,248,0.68);
--app-ink-on-dark-3: rgba(240,244,248,0.45);
/* borders */
--app-border: #DAE2EC;
--app-border-strong: #B7C3D3;
--app-border-dark: rgba(255,255,255,0.08);
--app-border-dark-2: rgba(255,255,255,0.16);
/* status */
--app-success: #34C759; /* "Offline — All Systems Ready" dot */
--app-danger: #E8604C;
--app-radius: 14px;
--app-radius-sm: 10px;
}