/**
 * HES design tokens - raw values only, no semantic meaning yet.
 *
 * Semantic roles (color-primary, color-error, etc.) are mapped onto these
 * in Layer 2. Nothing outside this file should hardcode a raw value that
 * belongs to one of these categories.
 *
 * Breakpoint tokens are reference values only - CSS custom properties
 * cannot be read inside @media conditions, so hand-written media queries
 * must match these pixel values manually.
 */

:root {
  /* Color - navy family (formalizes the palette already in use across
     hes_w3css/css/*.css from the recent hero/case-study redesign) */
  --hes-color-navy-900: #1c2b36;
  --hes-color-navy-800: #082d4d;
  --hes-color-navy-700: #0c426f;
  --hes-color-navy-100: #cfe0ee;
  --hes-color-navy-050: #eef3f7;

  /* Color - gold/amber accent family. 500 is for large-text/decorative use
     only (matches the existing case-study stat-number usage, 3.25:1 on
     white - passes the WCAG AA large-text threshold, fails normal-text).
     400 is a fill-only variant, ~2% lighter, reserved for solid button/
     badge fills paired with navy-900 text (4.91:1, passes normal-text). */
  --hes-color-gold-700: #8f6608;
  --hes-color-gold-500: #b8860b;
  --hes-color-gold-400: #c28d0c;

  /* Color - green (status). 600 is icon/decorative only (matches the
     existing homepage SVG checkmarks) - it fails WCAG AA as text (4.32:1
     on white). 700 is for text/label use (5.75:1 on white). */
  --hes-color-green-600: #1e8a5f;
  --hes-color-green-700: #1a744e;

  /* Color - red (status) - new family, nothing in the current site covers
     "error" yet; kept desaturated to match the existing restrained palette
     rather than a bright alert-red */
  --hes-color-red-600: #9e3a3a;

  /* Color - dark-theme-only lighter status variants. The 600/700 shades
     above are tuned for light backgrounds (white/navy-050) and fail WCAG
     AA as text once the page background itself goes dark (verified:
     green-700 on navy-900 is 2.52:1, gold-700 is 2.81:1, red-600 is
     2.15:1 - all fail the 4.5:1 text minimum). These three exist only to
     be swapped in by the `[data-theme="dark"]` block in color-system.css
     - never reference them directly from a component. */
  --hes-color-green-300: #4fd694;
  --hes-color-gold-300: #f0c85a;
  --hes-color-red-300: #f0a3a3;

  /* Color - gray/neutral family */
  --hes-color-gray-600: #5b6b76;
  --hes-color-gray-100: #e7edf2;
  --hes-color-gray-050: #f7f9fb;

  /* Color - base */
  --hes-color-white: #ffffff;
  --hes-color-black: #000000;

  /* Spacing - 4px base unit, scale of 8 */
  --hes-space-1: 4px;
  --hes-space-2: 8px;
  --hes-space-3: 12px;
  --hes-space-4: 16px;
  --hes-space-5: 24px;
  --hes-space-6: 32px;
  --hes-space-7: 48px;
  --hes-space-8: 64px;
  --hes-space-9: 96px;
  --hes-space-10: 128px;

  /* Border radius - small and restrained, not consumer-SaaS rounded */
  --hes-radius-none: 0;
  --hes-radius-sm: 2px;
  --hes-radius-md: 4px;
  --hes-radius-lg: 8px;
  --hes-radius-full: 9999px;

  /* Shadow/elevation - subtle, tinted with navy-900 instead of generic black */
  --hes-shadow-sm: 0 1px 2px rgba(28, 43, 54, 0.08);
  --hes-shadow-md: 0 2px 8px rgba(28, 43, 54, 0.12);
  --hes-shadow-lg: 0 8px 24px rgba(28, 43, 54, 0.16);

  /* Breakpoints - reference only, see file header note */
  --hes-breakpoint-mobile: 480px;
  --hes-breakpoint-tablet: 768px;
  --hes-breakpoint-desktop: 1024px;
  --hes-breakpoint-wide: 1280px;

  /* Z-index - for nav, modals, sticky headers */
  --hes-z-base: 1;
  --hes-z-dropdown: 100;
  --hes-z-sticky: 200;
  --hes-z-nav: 300;
  --hes-z-modal-backdrop: 400;
  --hes-z-modal: 500;
  --hes-z-toast: 600;
}