/* ==========================================================================
Intelligent Title — Color Tokens v1.0
File: /assets/css/it-tokens.css
Load AFTER site.css:
Layers
1. Primitive scales (--it-teal-*, --it-navy-*, --it-slate-*)
2. Semantic roles (--it-surface-*, --it-text-*, --it-action-*)
3. Legacy aliases (keeps every existing site.css variable working)
(Defect and contrast fixes live in it-fixes.css.)
4. Utilities (section surfaces, gradient bridges, glow, key terms)
5. Reduced motion
All text pairings listed in the contrast matrix meet WCAG 2.2 AA (4.5:1).
Every value derives from the existing brand colors:
navy #0F2342, navy-dark #081733, teal #14A3B8, teal-dark #0E7F91.
========================================================================== */
/* --------------------------------------------------------------------------
1. PRIMITIVE SCALES
-------------------------------------------------------------------------- */
:root {
/* Teal — white-to-teal tints (25–400), brand (500–600), deep (700–900) */
--it-teal-25: #F6FBFC; /* softest section wash */
--it-teal-50: #ECF8F9; /* callout bands, FAQ, video stage on light */
--it-teal-100: #D9F0F4; /* card hover, active tab, in-page nav active */
--it-teal-200: #B8E3EA; /* borders, dividers, diagram strokes (decor.) */
--it-teal-300: #8AD1DC; /* illustration fills, chart secondary */
--it-teal-400: #4FBACA; /* accents and focus ring on dark surfaces */
--it-teal-500: #14A3B8; /* BRAND TEAL — icons, strokes, large accents */
--it-teal-600: #0E7F91; /* BRAND TEAL DARK — action fills, eyebrows */
--it-teal-700: #0B6F7F; /* action hover, eyebrows on tinted surfaces */
--it-teal-800: #0E566D; /* deep teal band */
--it-teal-900: #0F3F5A; /* teal-to-navy bridge */
/* Navy — dark surfaces, stepping from teal-shifted to brand navy */
--it-navy-600: #115D77; /* lightest dark surface; gradient midpoint */
--it-navy-700: #104965; /* bridge tone between navy and teal */
--it-navy-800: #103654; /* secondary dark band, video library */
--it-navy-900: #0F2342; /* BRAND NAVY — primary dark surface */
--it-navy-950: #081733; /* BRAND NAVY DARK — footer */
/* Slate — navy-tinted neutrals for text, borders, and quiet surfaces */
--it-slate-25: #FAFBFB;
--it-slate-50: #F5F6F7;
--it-slate-100: #ECEDF0;
--it-slate-200: #D9DCE1; /* borders */
--it-slate-300: #B2B9C3; /* strong borders, disabled strokes */
--it-slate-400: #828D9D; /* icons and placeholders only (3.36:1) */
--it-slate-500: #57657B; /* subtle text — passes on white and tints */
/* Bright accents — dark surfaces only (video glow, highlights) */
--it-glow: #00D4D4;
--it-glow-soft: #6FF3F3;
--it-teal-on-dark: #5FD3E3; /* eyebrows on navy (8.89:1 on navy-900) */
/* Existing text neutrals, kept as primitives */
--it-ink: #1F2937;
--it-gray-500: #6B7280;
--it-white: #FFFFFF;
}
/* --------------------------------------------------------------------------
2. SEMANTIC ROLES — use these in new components
-------------------------------------------------------------------------- */
:root {
/* Surfaces, light register (about 60 percent of a page) */
--it-surface: var(--it-white);
--it-surface-wash: var(--it-teal-25); /* alternate with white */
--it-surface-tint: var(--it-teal-50); /* callouts, price band */
--it-surface-tint-2: var(--it-teal-100); /* hover, selected */
--it-surface-neutral: var(--it-slate-50); /* utility / trust band */
/* Surfaces, dark register (about 30 percent of a page) */
--it-surface-dark: var(--it-navy-900); /* CTA bands */
--it-surface-dark-2: var(--it-navy-800); /* video bands, library */
--it-surface-dark-3: var(--it-navy-700); /* stat cards on dark */
--it-surface-footer: var(--it-navy-950);
/* Text on light surfaces */
--it-text: var(--it-ink); /* 13.5:1 on teal-50 */
--it-text-heading: var(--it-navy-900);
--it-text-muted: var(--it-gray-500); /* white and teal-25 only */
--it-text-subtle: var(--it-slate-500); /* any light surface */
--it-eyebrow: var(--it-teal-600); /* on white */
--it-eyebrow-on-tint: var(--it-teal-700); /* on teal-25/50/100 */
--it-link: var(--it-teal-600);
--it-link-hover: var(--it-teal-700);
/* Text on dark surfaces */
--it-text-on-dark: var(--it-white);
--it-text-on-dark-muted: rgba(255, 255, 255, 0.72); /* 9.5:1 on navy-950 */
--it-text-on-dark-subtle: rgba(255, 255, 255, 0.55); /* 6.0:1 on navy-950 */
--it-eyebrow-on-dark: var(--it-teal-on-dark);
--it-accent-on-dark: var(--it-teal-400);
/* Accent (about 10 percent of a page) */
--it-accent: var(--it-teal-500); /* non-text and large type */
/* Actions */
--it-action: var(--it-teal-600); /* white text 4.71:1 */
--it-action-hover: var(--it-teal-700); /* white text 5.84:1 */
--it-action-text: var(--it-white);
--it-action-alt: var(--it-navy-900); /* secondary solid button */
--it-action-alt-hover: var(--it-navy-800);
--it-action-on-dark: var(--it-teal-500); /* teal fill on navy */
--it-action-on-dark-text: var(--it-navy-900);/* navy text on teal 5.2:1 */
/* Borders and focus */
--it-border: var(--it-slate-200);
--it-border-strong: var(--it-slate-300);
--it-border-accent: var(--it-teal-200); /* decorative */
--it-focus-ring: var(--it-teal-600); /* 4.71:1 vs white */
--it-focus-ring-dark: var(--it-teal-400); /* 6.88:1 vs navy-900 */
/* Gradients and light */
--it-bridge-to-dark: linear-gradient(180deg,
var(--it-white) 0%,
var(--it-teal-50) 45%,
var(--it-navy-700) 82%,
var(--it-navy-900) 100%);
--it-bridge-to-light: linear-gradient(180deg,
var(--it-navy-900) 0%,
var(--it-navy-700) 18%,
var(--it-teal-50) 55%,
var(--it-white) 100%);
--it-wash-down: linear-gradient(180deg, var(--it-white) 0%, var(--it-teal-25) 100%);
--it-dark-depth: linear-gradient(160deg, var(--it-navy-900) 0%, var(--it-navy-800) 60%, var(--it-navy-700) 100%);
--it-glow-radial: radial-gradient(60% 70% at 50% 40%,
rgba(20, 163, 184, 0.28) 0%,
rgba(20, 163, 184, 0.10) 45%,
rgba(20, 163, 184, 0) 75%);
--it-keyterm-bg: linear-gradient(transparent 62%, var(--it-teal-100) 62%);
/* Duotone grading for hero imagery (see .it-duotone) */
--it-duotone-shadow: var(--it-navy-900);
--it-duotone-light: var(--it-teal-25);
/* Elevation, tinted to navy */
--it-shadow-sm: 0 1px 2px rgba(15, 35, 66, 0.06);
--it-shadow-md: 0 4px 12px rgba(15, 35, 66, 0.08);
--it-shadow-lg: 0 12px 32px rgba(15, 35, 66, 0.12);
--it-shadow-glow: 0 0 0 1px rgba(20, 163, 184, 0.25), 0 10px 30px rgba(20, 163, 184, 0.18);
}
/* --------------------------------------------------------------------------
3. LEGACY ALIASES — existing site.css variables mapped onto the scale.
Names and values are unchanged. --text-light is remapped in it-fixes.css.
-------------------------------------------------------------------------- */
:root {
--navy: var(--it-navy-900);
--navy-dark: var(--it-navy-950);
--teal: var(--it-teal-500);
--teal-dark: var(--it-teal-600);
--text: var(--it-ink);
--text-muted: var(--it-gray-500);
--bg: var(--it-white);
/* --bg-soft (#F8FAFC), --bg-panel (#F1F5F9), --border (#E5E7EB), and
--border-strong (#CBD5E1) are left as defined in site.css. Migrate them
to --it-surface-wash / --it-surface-neutral / --it-border when convenient. */
}
/* --------------------------------------------------------------------------
4. UTILITIES
-------------------------------------------------------------------------- */
/* Section surfaces — alternate white / wash / white; tint for callouts */
.it-section { background: var(--it-surface); color: var(--it-text); }
.it-section--wash { background: var(--it-surface-wash); }
.it-section--tint { background: var(--it-surface-tint); }
.it-section--neutral { background: var(--it-surface-neutral); }
.it-section--dark { background: var(--it-surface-dark); color: var(--it-text-on-dark); }
.it-section--dark-2 { background: var(--it-surface-dark-2); color: var(--it-text-on-dark); }
.it-section--depth { background: var(--it-dark-depth); color: var(--it-text-on-dark); }
.it-section--wash .eyebrow,
.it-section--tint .eyebrow,
.it-eyebrow--tint { color: var(--it-eyebrow-on-tint); }
.it-section--wash .text-muted,
.it-section--tint .text-muted { color: var(--it-text-subtle); }
.it-section--dark .eyebrow,
.it-section--dark-2 .eyebrow,
.it-section--depth .eyebrow,
.it-eyebrow--dark { color: var(--it-eyebrow-on-dark); }
/* Gradient bridges — place between a light and a dark section.
Decorative: add aria-hidden="true". */
.it-bridge { display: block; height: 96px; pointer-events: none; }
.it-bridge--to-dark { background: var(--it-bridge-to-dark); }
.it-bridge--to-light { background: var(--it-bridge-to-light); }
.it-bridge--wash { height: 64px; background: var(--it-wash-down); }
@media (max-width: 640px) { .it-bridge { height: 56px; } }
/* Curved edge variant — a soft arc into the next section's color */
.it-arc-to-dark,
.it-arc-to-light { position: relative; }
.it-arc-to-dark::after,
.it-arc-to-light::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px;
pointer-events: none;
-webkit-mask: radial-gradient(120% 100% at 50% 100%, #000 49.5%, transparent 50%);
mask: radial-gradient(120% 100% at 50% 100%, #000 49.5%, transparent 50%);
}
.it-arc-to-dark::after { background: var(--it-navy-900); }
.it-arc-to-light::after { background: var(--it-white); }
/* Teal glow behind a video frame or CTA card on dark surfaces */
.it-glow { position: relative; isolation: isolate; }
.it-glow::before {
content: ""; position: absolute; inset: -12% -8%; z-index: -1;
background: var(--it-glow-radial); pointer-events: none;
}
/* Video band — navy-800 stage with glow (drop the embedded player inside) */
.it-video-band {
background: var(--it-dark-depth);
color: var(--it-text-on-dark);
padding: 72px 0;
}
.it-video-band .it-video-frame {
position: relative; border-radius: 12px; overflow: hidden;
box-shadow: var(--it-shadow-glow);
border: 1px solid rgba(111, 243, 243, 0.18);
}
/* Key-term highlight — mirrors the teal glow on key terms in the videos */
.it-keyterm {
background-image: var(--it-keyterm-bg);
color: inherit; padding: 0 2px; border-radius: 2px;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.it-section--dark .it-keyterm,
.it-section--dark-2 .it-keyterm,
.it-video-band .it-keyterm {
background-image: none; color: var(--it-glow-soft);
}
/* Cards */
.it-card {
background: var(--it-surface); border: 1px solid var(--it-border);
border-radius: 10px; box-shadow: var(--it-shadow-sm);
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.it-card:hover, .it-card:focus-within {
border-color: var(--it-teal-300); box-shadow: var(--it-shadow-md); transform: translateY(-2px);
}
.it-card--tint { background: var(--it-surface-tint); border-color: var(--it-teal-200); }
.it-card--dark {
background: var(--it-surface-dark-3); color: var(--it-text-on-dark);
border-color: rgba(255, 255, 255, 0.10);
}
/* Icons (category cards, checklists) */
.it-icon { color: var(--it-teal-600); width: 32px; height: 32px; stroke-width: 1.5; }
.it-icon-tile {
display: inline-grid; place-items: center; width: 52px; height: 52px;
border-radius: 12px; background: var(--it-teal-50); color: var(--it-teal-600);
}
.it-section--dark .it-icon,
.it-section--dark-2 .it-icon { color: var(--it-teal-400); }
/* Duotone hero grading — navy shadows, teal-white highlights */
.it-duotone { position: relative; isolation: isolate; overflow: hidden; }
.it-duotone > img { filter: grayscale(1) contrast(1.05); mix-blend-mode: normal; display: block; width: 100%; height: 100%; object-fit: cover; }
.it-duotone::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(135deg, var(--it-duotone-shadow) 0%, var(--it-teal-700) 55%, var(--it-teal-300) 100%);
mix-blend-mode: screen; opacity: 0.55;
}
.it-duotone--soft::after { opacity: 0.30; }
/* Solid navy button on light surfaces; teal button on dark surfaces */
.it-btn-alt { background: var(--it-action-alt); color: var(--it-white); }
.it-btn-alt:hover { background: var(--it-action-alt-hover); }
.it-btn-on-dark { background: var(--it-action-on-dark); color: var(--it-action-on-dark-text); }
.it-btn-on-dark:hover { background: var(--it-teal-400); }
/* --------------------------------------------------------------------------
5. REDUCED MOTION
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.it-card, .it-card:hover, .it-card:focus-within { transition: none; transform: none; }
}