/* DHCO. Colors — extracted directly from the brand-identity source (exact RGB).
   Primary is the electric "DHCO Blue" #1718FF; darks are deep indigo/navy. */
:root {
  /* ---- Brand core ---- */
  --dhco-blue: #1718FF;        /* primary — electric royal blue */
  --dhco-navy: #040136;        /* deepest brand dark (near-black indigo) */
  --dhco-ink: #00113F;         /* deep blue ink — headings on light */
  --dhco-black: #000000;

  /* ---- Blue ramp (derived from --dhco-blue for states/tints) ---- */
  --blue-700: #0E0FC2;         /* pressed / active */
  --blue-600: #1718FF;         /* base */
  --blue-500: #4B4CFF;         /* hover-light */
  --blue-200: #C7C7FF;         /* tint / borders */
  --blue-100: #ECECFF;         /* faint fill */

  /* ---- Neutrals (from source) ---- */
  --white: #FFFFFF;
  --gray-50: #F4F5F7;          /* lightest surface */
  --gray-100: #EAEAEA;         /* dividers, muted fills */
  --gray-500: #8A8D93;         /* muted text (derived) */
  --gray-800: #24272A;         /* dark surface / body on light-alt */
  --gray-900: #1B1C20;         /* near-black surface */

  /* ---- Semantic aliases ---- */
  --color-primary: var(--dhco-blue);
  --color-primary-hover: var(--blue-500);
  --color-primary-active: var(--blue-700);
  --color-on-primary: var(--white);

  --bg-page: var(--white);
  --bg-inverse: var(--dhco-navy);
  --surface-card: var(--white);
  --surface-muted: var(--gray-50);
  --surface-dark: var(--gray-900);

  --text-heading: var(--dhco-ink);
  --text-body: var(--gray-800);
  --text-muted: var(--gray-500);
  --text-on-dark: var(--white);
  --text-link: var(--dhco-blue);

  --border-subtle: var(--gray-100);
  --border-strong: var(--dhco-ink);
  --focus-ring: var(--dhco-blue);
}