/* ==========================================================================
   HCISS Design Tokens
   Extracted from the approved homepage build (hciss-homepage-artifact.html).
   Load this file before components.css on every page of hciss.io.
   ========================================================================== */

:root {

  /* ---- Color: Navy (primary / dark) ---- */
  --hciss-navy-900: #13233F;   /* deepest navy — dark section backgrounds, "Live" badges, dark card icon strokes */
  --hciss-navy-800: #1E283A;   /* hero / CTA background, heading text on white, primary button label color */
  --hciss-navy-700: #435577;   /* secondary body copy on white/light backgrounds */

  /* ---- Color: Neutrals ---- */
  --hciss-white:     #FFFFFF;
  --hciss-slate-050: #F4F6F8;  /* page background, light section background, footer background, headline text on navy */
  --hciss-ice-200:   #A9B8CE;  /* body copy on navy backgrounds */
  --hciss-border:    #E2E8F0;  /* hairline borders, card borders, dividers */

  /* ---- Color: Gold (accent) ---- */
  --hciss-gold-900: #8A6A10;   /* icon strokes on tinted gold chips, "Roadmap" badge text/border */
  --hciss-gold-700: #977115;   /* link hover state */
  --hciss-gold-600: #C9971C;   /* PRIMARY ACCENT — links, primary buttons, active nav states, eyebrow labels */
  --hciss-gold-500: #D3AA45;   /* primary button hover fill */
  --hciss-gold-300: #EFD96C;   /* small accent dots / graphic highlights only — never for text */
  --hciss-gold-border: #D3B673; /* dashed borders on "roadmap"/future-state cards */

  /* ---- Color: Network graphic (hero illustration only) ---- */
  --hciss-line-1: #2A3B58;
  --hciss-line-2: #1B2A42;
  --hciss-line-3: #3A4E6E;

  /* ---- Type families ---- */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;      /* headings, buttons, nav */
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* paragraph copy, links, form fields */
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', monospace;                /* eyebrows, badges, uppercase labels */

  /* ---- Type scale (desktop) ---- */
  --text-h1: 800 50px/1.12 var(--font-display);   /* hero headline — 36px/1.15 below 640px */
  --text-h2: 800 32px/1.25 var(--font-display);   /* section headline */
  --text-h3: 700 18px/1.3  var(--font-display);   /* card / feature title */
  --text-body-lg: 400 18px/1.6 var(--font-body);  /* hero subhead */
  --text-body: 400 16px/1.6 var(--font-body);     /* section intro copy */
  --text-body-sm: 400 14.5px/1.55 var(--font-body); /* card body copy */
  --text-nav: 400 15px/1.4 var(--font-body);      /* nav links, footer links */
  --text-button: 600 15px/1.2 var(--font-display); /* button labels */
  --text-eyebrow: 600 13px/1.4 var(--font-mono);  /* uppercase eyebrow labels, letter-spacing 0.14em */
  --text-label: 600 11px/1.4 var(--font-mono);    /* uppercase micro-labels (footer column headers), letter-spacing 0.08em */

  /* ---- Spacing ---- */
  --space-section-y: 84px;         /* standard section vertical padding */
  --space-section-y-compact: 52px; /* industries strip, footer */
  --space-section-y-cta: 92px;     /* final CTA section */
  --space-section-x: 64px;         /* section horizontal padding, desktop */
  --space-section-x-mobile: 24px;  /* section horizontal padding, ≤640px */
  --space-container-max: 1180px;   /* standard content max-width */
  --space-hero-max: 1320px;        /* hero row max-width */
  --space-hero-copy-max: 560px;    /* hero text column max-width */

  /* ---- Radius ---- */
  --radius-card: 10px;
  --radius-button: 6px;
  --radius-badge: 4px;
  --radius-icon-tile: 8px;

  /* ---- Breakpoints (reference only — CSS can't consume these as variables in media queries) ---- */
  /* 900px  — hero row stacks; 4-col grids become 2-col   */
  /* 880px  — primary nav collapses to hamburger menu     */
  /* 640px  — hero padding/font-size step down            */
  /* 560px  — 4-col grids become 1-col                    */

  /* ---- Motion ---- */
  --ease-standard: ease;
  --duration-hover: 0.15s;
  --duration-reveal: 0.7s;
  --duration-pulse: 2.6s;
}
