/* =====================================================================
* GRIP / Field Ops — Design Tokens
* Drop into any new app's :root to inherit the palette, type, and depth
* recipes. Source of truth: grip-app/index.html.
*
* Companion file: grip-components.css (button + card + chip patterns
* built on top of these tokens).
*
* Fonts: import this once in your before grip-tokens.css
*
*
*
*
* ===================================================================== */
:root {
/* ---- Deep carbon base (default surface stack) ---- */
--grip-ink: #05070a; /* page background */
--grip-ink-2: #0a0c11; /* near-ink fill (chips, inputs) */
--grip-surface: #0f1217; /* card background */
--grip-surface-2: #151921; /* hover / raised */
--grip-line: #212731; /* hairline borders */
--grip-line-hi: #2e3642; /* emphasized borders */
--grip-bone: #e8ebf0; /* primary text */
--grip-muted: #7a818c; /* secondary text */
--grip-muted-2: #4a515b; /* tertiary / disabled */
/* ---- Chrome steps (for CTAs and metallic seals) ---- */
--grip-chrome-hi: #d8dce3;
--grip-chrome: #a9aeb6;
--grip-chrome-lo: #4a4f57;
--grip-chrome-sh: #1c1f25;
--grip-chrome-grad:
linear-gradient(180deg, #e3e7ec 0%, #c4c9d1 18%, #9ea4ad 45%, #767c85 72%, #c2c7cf 100%);
--grip-chrome-grad-h:
linear-gradient(92deg, #b7bcc5 0%, #dde1e7 22%, #a2a8b1 55%, #dee2e8 78%, #8d939c 100%);
/* ---- Electric blue — sourced from the LED edge of the chrome GRIP mark ---- */
--grip-blue: #4fb6ff;
--grip-blue-hi: #84cfff;
--grip-blue-dim: #1e6aa6;
--grip-blue-glow: 0 0 18px rgba(79,182,255,0.55), 0 0 36px rgba(79,182,255,0.22);
--grip-blue-glow-sm: 0 0 10px rgba(79,182,255,0.45);
--grip-accent: var(--grip-blue);
/* ---- Semantic states ---- */
--grip-heat: #ff5c4a; /* warnings / bad-direction */
--grip-green: #66e58e; /* good-direction / health=3 */
--grip-green-hi: #98f2b4;
--grip-amber: #ffcc66; /* attention / pending */
/* ---- Carbon weave (subtle inner texture for cards) ---- */
--grip-carbon-a: #0b0d11;
--grip-carbon-b: #13161c;
--grip-carbon-inset:
linear-gradient(45deg, rgba(255,255,255,0.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.018) 75%) 0 0 / 4px 4px,
linear-gradient(-45deg, rgba(255,255,255,0.012) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.012) 75%) 2px 2px / 4px 4px;
/* ---- Milled-aluminum bevel (apply as box-shadow on every card/tile/chip) ---- */
--grip-bevel-hi: inset 0 1px 0 rgba(255,255,255,0.07); /* chrome top edge */
--grip-bevel-lo: inset 0 -1px 0 rgba(0,0,0,0.55); /* shadow bottom seat */
--grip-bevel-ring: 0 0 0 1px rgba(0,0,0,0.25); /* outer hairline */
--grip-bevel: var(--grip-bevel-hi), var(--grip-bevel-lo);
--grip-bevel-drop: var(--grip-bevel-hi), var(--grip-bevel-lo), 0 10px 24px -16px rgba(0,0,0,0.8);
/* ---- LED bloom presets (real light, not blue paint) ---- */
--grip-led-core: 0 0 0 1px rgba(140, 210, 255, 0.9); /* hot inner ring */
--grip-led-near: 0 0 10px rgba(79, 182, 255, 0.65); /* close bloom */
--grip-led-far: 0 0 26px rgba(79, 182, 255, 0.38); /* broad halo */
--grip-led-cast: 0 0 48px rgba(79, 182, 255, 0.18); /* ambient cast */
--grip-led-blue: var(--grip-led-core), var(--grip-led-near), var(--grip-led-far), var(--grip-led-cast);
--grip-led-inner: inset 0 0 18px rgba(79,182,255,0.22),
inset 0 0 0 1px rgba(79,182,255,0.55);
--grip-text-led: 0 0 1px rgba(230,245,255,0.85),
0 0 10px rgba(79,182,255,0.75),
0 0 20px rgba(79,182,255,0.35);
/* Heat (warning) and green (good) variants of the LED stack */
--grip-led-heat: 0 0 0 1px rgba(255,150,130,0.9), 0 0 10px rgba(255,92,74,0.6), 0 0 26px rgba(255,92,74,0.32);
--grip-led-green: 0 0 0 1px rgba(168,245,190,0.9), 0 0 10px rgba(102,229,142,0.6), 0 0 26px rgba(102,229,142,0.32);
/* ---- Geometry ---- */
--grip-radius: 14px; /* default cards */
--grip-radius-sm: 10px; /* chips, small tiles */
--grip-radius-pill: 999px; /* pill chips, toggles */
--grip-ease: cubic-bezier(0.2, 0.7, 0.1, 1); /* default in/out ease */
/* ---- Type stack ---- */
--grip-font-display: "Chakra Petch", ui-sans-serif, system-ui, sans-serif; /* italic display headlines */
--grip-font-body: "Archivo", ui-sans-serif, system-ui, sans-serif; /* body, paragraphs */
--grip-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* eyebrows, labels, scores */
/* ---- Layout ---- */
--grip-app-max: 430px; /* mobile-first PWA frame */
--grip-screen-pad: 20px; /* horizontal screen padding */
}
/* Body defaults — copy this rule to inherit the right surface + text stack */
html, body {
margin: 0; padding: 0; min-height: 100%;
background: var(--grip-ink);
color: var(--grip-bone);
font-family: var(--grip-font-body);
font-size: 16px; line-height: 1.45;
-webkit-font-smoothing: antialiased;
overscroll-behavior: none;
}