/* ============================================================
JIT ENGINEERING — Design Tokens: Colors & Type
Industrial automation • PLC & SCADA • operational software
Load order: this file expects Titillium Web + IBM Plex Mono.
In HTML, add before this file:
============================================================ */
:root {
/* ---- Brand core ---------------------------------------- */
--jit-navy: #23416A; /* primary brand blue (wordmark) */
--jit-orange: #F2941F; /* accent / swoosh */
/* ---- Navy / blue ramp ---------------------------------- */
--navy-950: #061226; /* deepest — site theme color, footers, hero */
--navy-900: #0B1D3A;
--navy-800: #112A52;
--navy-700: #18386B;
--navy-600: #23416A; /* = brand navy */
--navy-500: #2E5286;
--navy-400: #4470A6;
--navy-300: #6E97C4;
--navy-200: #A7C2DE;
--navy-100: #D6E3F0;
--navy-50: #EEF3F9;
/* ---- Orange / accent ramp ------------------------------ */
--orange-700: #B9670C;
--orange-600: #D67E12;
--orange-500: #F2941F; /* = brand orange */
--orange-400: #F7A845;
--orange-300: #FAC177;
--orange-200: #FDDDAE;
--orange-100: #FEEFD8;
/* ---- Neutral (cool gray) ramp -------------------------- */
--gray-950: #0E141C;
--gray-900: #1A2230;
--gray-800: #2A3441;
--gray-700: #3D4856;
--gray-600: #57636F;
--gray-500: #75828F;
--gray-400: #9AA6B2;
--gray-300: #C2CCD6;
--gray-200: #DDE3EA;
--gray-150: #E7ECF1;
--gray-100: #F1F4F7;
--gray-50: #F8FAFC;
--white: #FFFFFF;
/* ---- Semantic / status (industrial control rooms) ------ */
--status-run: #1E9E5A; /* running / OK / online */
--status-run-bg: #E4F4EC;
--status-warn: #E8A317; /* warning / attention */
--status-warn-bg:#FCF1D8;
--status-alarm: #D33A2C; /* alarm / fault / offline */
--status-alarm-bg:#FBE6E3;
--status-info: #2E5286; /* info / informational */
--status-info-bg:#E8EFF7;
--status-idle: #75828F; /* idle / stopped / unknown */
--status-idle-bg:#EEF1F4;
/* ---- Semantic foreground tokens ------------------------ */
--fg-1: var(--navy-950); /* primary text */
--fg-2: var(--gray-700); /* secondary text */
--fg-3: var(--gray-500); /* tertiary / captions */
--fg-on-dark: #EAF1F8; /* primary text on navy */
--fg-on-dark-2:#9DB2CC; /* secondary text on navy */
--fg-brand: var(--jit-navy);
--fg-accent: var(--orange-600);
/* ---- Surfaces & lines ---------------------------------- */
--bg-page: #F4F7FA; /* app/page background */
--bg-surface: var(--white);
--bg-sunken: var(--gray-100);
--bg-dark: var(--navy-950);
--bg-dark-surface: var(--navy-900);
--border: var(--gray-200);
--border-strong: var(--gray-300);
--border-dark: rgba(255,255,255,0.10);
/* ---- Radii (tight, technical) -------------------------- */
--r-xs: 2px;
--r-sm: 4px;
--r-md: 6px;
--r-lg: 10px;
--r-xl: 16px;
--r-pill: 999px;
/* ---- Spacing (4px base grid) --------------------------- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
/* ---- Elevation (soft, low, cool-tinted) ---------------- */
--shadow-xs: 0 1px 2px rgba(11,29,58,0.06);
--shadow-sm: 0 1px 3px rgba(11,29,58,0.08), 0 1px 2px rgba(11,29,58,0.06);
--shadow-md: 0 4px 12px rgba(11,29,58,0.10);
--shadow-lg: 0 12px 28px rgba(11,29,58,0.14);
--shadow-focus: 0 0 0 3px rgba(35,65,106,0.18);
--shadow-focus-accent: 0 0 0 3px rgba(242,148,31,0.28);
/* ---- Type families ------------------------------------- */
--font-display: 'Titillium Web', 'Segoe UI', system-ui, sans-serif;
--font-body: 'Titillium Web', 'Segoe UI', system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
/* ---- Type scale ---------------------------------------- */
--fs-display: 56px; --lh-display: 1.04; --ls-display: -0.02em;
--fs-h1: 40px; --lh-h1: 1.10; --ls-h1: -0.015em;
--fs-h2: 30px; --lh-h2: 1.16; --ls-h2: -0.01em;
--fs-h3: 22px; --lh-h3: 1.25; --ls-h3: 0;
--fs-h4: 18px; --lh-h4: 1.35; --ls-h4: 0;
--fs-body-lg: 18px; --lh-body-lg: 1.6;
--fs-body: 16px; --lh-body: 1.6;
--fs-sm: 14px; --lh-sm: 1.5;
--fs-xs: 12px; --lh-xs: 1.45;
--fs-eyebrow: 13px; --ls-eyebrow: 0.14em;
}
/* ============================================================
Semantic element defaults
============================================================ */
.jit-display {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-display);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--fg-1);
}
h1, .jit-h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-h1);
letter-spacing: var(--ls-h1);
color: var(--fg-1);
}
h2, .jit-h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h2);
line-height: var(--lh-h2);
letter-spacing: var(--ls-h2);
color: var(--fg-1);
}
h3, .jit-h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
color: var(--fg-1);
}
h4, .jit-h4 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h4);
line-height: var(--lh-h4);
color: var(--fg-1);
}
.jit-eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--fg-accent);
}
p, .jit-body {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--fg-2);
}
.jit-body-lg {
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
}
.jit-small { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.jit-caption { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--fg-3); }
code, .jit-mono {
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.92em;
letter-spacing: 0;
}
.jit-data {
font-family: var(--font-mono);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}