/* ==========================================================================
Apex Research - design tokens
Adapted from "Signal" (Modern Minimal)
--------------------------------------------------------------------------
Single source of truth for colour, type, spacing, shape and motion.
index.html must not hardcode a colour, font, size or radius.
Reference these from Tailwind arbitrary values:
bg-[var(--color-surface)] text-[var(--color-ink)]
FONT LOADING: do NOT @import fonts here. CSS @import is render-blocking
and fires only after this file downloads. Put this in instead:
========================================================================== */
:root {
/* --- Identity ---------------------------------------------------------- */
--theme-name: "Apex / Signal";
/* --- Colour ------------------------------------------------------------
Monochrome base, matching the black logo mark. Product photography
carries the colour, the interface does not compete with it.
Blue is demoted to a functional role only: links, focus rings, active
states. It is NOT the button colour. Every peptide and pharma site on
the internet uses trust-blue as its primary; going monochrome-primary
is both more distinctive and more instrument-like.
Replace --color-accent if the Apex brand brief specifies otherwise -
the brand brief always wins over this default. */
--color-ink: #0F0F0F; /* primary text, logo, primary buttons */
--color-ink-muted: #6E6E6E; /* secondary text, captions */
--color-ink-subtle: #9B9B9B; /* disabled, placeholder */
--color-surface: #FFFFFF; /* page background */
--color-surface-alt: #F7F7F8; /* alternating section bands, cards */
--color-surface-inv: #0F0F0F; /* inverted sections */
--color-line: #E4E4E7; /* hairlines, card borders */
--color-line-strong: #C9C9CF; /* input borders, dividers */
--color-accent: #3A76F8; /* links, focus, active - used sparingly */
--color-accent-wash: #EBF1FF; /* selected states, subtle highlight */
/* --- Typography --------------------------------------------------------
One family, three roles. Per Wade: Inter only, no second face.
Inter does display, body and label. Weight and tracking carry the
hierarchy instead of a typeface change - tight tracking and heavy
weight at large sizes, wide tracking and medium weight in small caps.
Spec data (purity, batch, quantity, CoA reference, storage temp) was
previously set in a monospaced face so it would read as data rather
than marketing. That job now falls to `font-variant-numeric:
tabular-nums`, which fixes the figures to a common width so columns of
numbers still line up. Keep spec blocks on the .tnum utility. */
--font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--font-label: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--tracking-display: -0.04em; /* large type only */
--tracking-tight: -0.03em; /* h2, h3 */
--tracking-body: 0em;
--tracking-label: 0.06em; /* eyebrows, small caps, spec labels */
/* --- Type scale --------------------------------------------------------
Fluid. The original fixed 5rem display overflowed on a 390px screen.
clamp() holds the intent on desktop and stays readable on mobile. */
--text-display: clamp(2.75rem, 7vw, 5rem);
--text-h1: clamp(2.25rem, 5vw, 3.25rem);
--text-h2: clamp(1.625rem, 3.5vw, 2rem);
--text-h3: 1.375rem;
--text-body-lg: 1.125rem;
--text-body: 1rem;
--text-small: 0.875rem;
--text-micro: 0.75rem;
--leading-display: 1.02;
--leading-heading: 1.15;
--leading-body: 1.55;
--leading-tight: 1.3;
/* --- Spacing -----------------------------------------------------------
8px base. Explicit steps rather than a bare multiplier, so spacing is
picked from a scale instead of improvised per section. */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 80px;
--space-8: 128px; /* between major page sections */
/* --- Layout ------------------------------------------------------------ */
--max-width: 1280px;
--max-width-text: 65ch; /* never run body copy wider than this */
--gutter-mobile: var(--space-3);
--gutter-desktop: var(--space-5);
--header-height: 56px;
/* --- Shape -------------------------------------------------------------
The source theme used a single 48px radius. That reads soft and
consumer-app; this brand needs to read like lab equipment. Radii are
scaled down and split by role. 48px survives only on pills. */
--radius-sm: 4px; /* inputs, badges, small controls */
--radius-md: 8px; /* product cards, image frames */
--radius-lg: 16px; /* large panels, modals */
--radius-pill: 999px; /* tags, category chips */
--border-hairline: 1px solid var(--color-line);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
/* --- Motion ------------------------------------------------------------ */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--duration-fast: 150ms;
--duration-normal: 300ms;
/* --- Focus -------------------------------------------------------------
Keyboard focus must be visible on every interactive element. */
--focus-ring: 2px solid var(--color-accent);
--focus-offset: 2px;
}
/* --- Base ----------------------------------------------------------------
Minimal. Tailwind's preflight handles the rest. */
:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}