/* ==========================================================================
   idlhost.com — design tokens
   Brand colours are lifted directly from assets/logo.svg. Do not invent new
   hues; derive from these. Orange is CTA-only, green is status-only.
   ========================================================================== */

:root {
  /* --- Brand (from logo.svg) --- */
  --idl-blue: #0054a6;
  --idl-orange: #f7941d;
  --idl-green: #0db14b;
  --idl-grey: #58595b;   /* wordmark grey, 2026 logo */

  /* --- Derived --- */
  --idl-blue-dark: #00417f;
  --idl-blue-light: #e8f0f9;
  --idl-orange-dark: #d97c0a;
  /* Text-weight variants. The brand orange and green are vivid enough to fail
     WCAG AA as text on white, so meaningful text and icons use these instead
     while fills, bullets and borders keep the pure brand colours. */
  --idl-orange-text: #b1580a;
  --idl-green-text: #0a893a;
  --idl-orange-light: #fef4e7;
  --idl-green-light: #e7f7ee;
  --idl-navy: #062a4f;
  --idl-navy-soft: #0d3a68;

  /* --- Neutrals --- */
  --idl-ink: #1b2733;
  --idl-body: #5a6472;
  --idl-muted: #6e7276;
  --idl-line: #e3e7ec;
  --idl-line-soft: #eef1f5;
  --idl-bg: #ffffff;
  --idl-bg-alt: #f7f9fb;

  /* --- Type --- */
  --font-head: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;  /* 17px — matches the live placeholder */
  --fs-lg: 1.1875rem;
  --fs-xl: 1.375rem;
  --fs-h3: 1.5rem;
  --fs-h2: 2rem;
  --fs-h1: 2.5rem;
  --fs-display: 3.125rem;

  /* --- Space (4px base) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* --- Radius: 4px buttons matches the placeholder --- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* --- Elevation --- */
  --sh-sm: 0 1px 2px rgba(6, 42, 79, 0.06), 0 1px 3px rgba(6, 42, 79, 0.08);
  --sh-md: 0 4px 12px rgba(6, 42, 79, 0.07), 0 2px 4px rgba(6, 42, 79, 0.05);
  --sh-lg: 0 12px 32px rgba(6, 42, 79, 0.10), 0 4px 8px rgba(6, 42, 79, 0.05);
  --sh-focus: 0 0 0 3px rgba(0, 84, 166, 0.35);

  /* --- Layout --- */
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --header-h: 76px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* The logo's dot grid, reused as the site's background motif. */
:root {
  --dot-grid: radial-gradient(circle at center, rgba(0, 84, 166, 0.13) 1.5px, transparent 1.6px);
  --dot-grid-light: radial-gradient(circle at center, rgba(255, 255, 255, 0.14) 1.5px, transparent 1.6px);
  --dot-size: 22px 22px;
}