/* ============================================================
NUTRICEPTICS — Colors & Type foundations
Single accent (red), white + whitespace, premium biotech.
Fonts are Google Fonts SUBSTITUTES (see README → flagged).
Load in HTML :
============================================================ */
:root {
/* ---- Brand accent (the ONLY chromatic color) ---- */
--red: #C51426; /* primary accent — chamois red */
--red-press: #A50F1F; /* darker, for active/press */
--red-hover: #B11221; /* hover */
--red-tint: #FBE9EB; /* 8% wash for backgrounds/badges */
--red-tint-2: #F6D7DA; /* slightly stronger tint, hairlines */
/* ---- Ink / neutrals (cool, restrained) ---- */
--ink: #15171A; /* fg1 — primary text, near-black */
--fg-1: #15171A;
--fg-2: #54585F; /* secondary text */
--fg-3: #868B93; /* tertiary / captions / muted */
--fg-4: #AEB2B9; /* disabled / faint */
/* ---- Surfaces ---- */
--bg: #FFFFFF; /* page */
--bg-subtle: #F6F7F8; /* off-white sections, cards */
--bg-sunken: #EFF1F2; /* wells, inputs hover */
--ink-surface: #15171A; /* dark sections (footer / hero) */
--ink-surface-2:#1E2125; /* raised on dark */
/* ---- Lines / borders ---- */
--line: #E5E7EA; /* default hairline */
--line-strong: #D3D6DA; /* emphasized divider */
--line-faint: #EFF1F2; /* whisper divider */
--line-on-ink: rgba(255,255,255,.14);
/* ---- Topographic motif line colors ---- */
--topo-faint: #ECEEF0; /* on white, decorative */
--topo-line: #D7DBDF; /* on white, visible */
--topo-on-ink: rgba(255,255,255,.10);
--topo-red: rgba(197,20,38,.16);
/* ---- Typefaces ---- */
--font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* ---- Type scale (1.5rem base, tight premium tracking) ---- */
--fs-display: clamp(3rem, 6vw, 5rem); /* 48–80px hero */
--fs-h1: clamp(2.4rem, 4vw, 3.25rem);/* 38–52px */
--fs-h2: 2rem; /* 32px */
--fs-h3: 1.5rem; /* 24px */
--fs-h4: 1.1875rem; /* 19px */
--fs-body-lg: 1.25rem; /* 20px lead */
--fs-body: 1.0625rem; /* 17px */
--fs-small: 0.9375rem; /* 15px */
--fs-eyebrow: 0.78125rem; /* 12.5px mono label */
--fs-caption: 0.8125rem; /* 13px */
--lh-tight: 1.04;
--lh-snug: 1.18;
--lh-body: 1.62;
--tracking-display: -0.022em;
--tracking-head: -0.014em;
--tracking-eyebrow: 0.18em; /* uppercase mono labels */
--tracking-wordmark:0.02em;
/* ---- Radii (restrained; near-square) ---- */
--r-xs: 2px;
--r-sm: 4px;
--r-md: 6px;
--r-lg: 10px;
--r-pill: 999px;
/* ---- Elevation — soft, low, neutral (premium, not floaty) ---- */
--sh-1: 0 1px 2px rgba(21,23,26,.05), 0 1px 1px rgba(21,23,26,.04);
--sh-2: 0 2px 8px rgba(21,23,26,.06), 0 1px 2px rgba(21,23,26,.05);
--sh-3: 0 12px 32px -8px rgba(21,23,26,.12), 0 4px 10px rgba(21,23,26,.06);
--sh-focus: 0 0 0 3px rgba(197,20,38,.22);
/* ---- Spacing scale (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; --s-11: 160px;
/* ---- Motion ---- */
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--dur-fast: 120ms;
--dur: 200ms;
--dur-slow: 420ms;
--maxw: 1200px;
}
/* ============================================================
SEMANTIC ELEMENT STYLES
============================================================ */
.nx-display {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-display);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-display);
color: var(--ink);
}
.nx-h1 {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-head);
color: var(--ink);
}
.nx-h2 {
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-h2);
line-height: 1.22;
letter-spacing: var(--tracking-head);
color: var(--ink);
}
.nx-h3 {
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-h3);
line-height: 1.28;
letter-spacing: -0.01em;
color: var(--ink);
}
.nx-h4 {
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-h4);
line-height: 1.32;
color: var(--ink);
}
.nx-lead {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-body-lg);
line-height: 1.5;
color: var(--fg-2);
}
.nx-body {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--fg-2);
}
.nx-small {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-small);
line-height: 1.5;
color: var(--fg-2);
}
/* Eyebrow / kicker — the signature biotech label */
.nx-eyebrow {
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-eyebrow);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--red);
}
.nx-eyebrow--muted { color: var(--fg-3); }
.nx-caption {
font-family: var(--font-mono);
font-weight: 400;
font-size: var(--fs-caption);
letter-spacing: 0.02em;
color: var(--fg-3);
}
.nx-mono {
font-family: var(--font-mono);
font-size: var(--fs-small);
letter-spacing: 0.01em;
color: var(--fg-2);
}
/* selection */
::selection { background: var(--red-tint-2); color: var(--ink); }