/* Apex Agency — colour. Every value transcribed from the .fig.
   The site palette is pure achromatic: black, white and a five-step grey ramp.
   Colour only ever enters through photography and campaign artwork. */
:root {
  /* ── Site ramp (Figma "Variable collection" + raw fills) ─────────────── */
  --apex-black: rgb(0, 0, 0);          /* page ground, footer, hero, buttons */
  --apex-ink: rgb(12, 12, 12);         /* wordmark letterform fill */
  --apex-ink-soft: rgb(17, 17, 17);    /* specimen / type-sheet text */
  --apex-base-black: rgb(26, 26, 26);  /* icon stroke (CaretDown) */
  --apex-white: rgb(255, 255, 255);

  --neutral-000: rgb(255, 255, 255);
  --neutral-100: rgb(240, 240, 240);   /* light section ground, ghost button */
  --neutral-200: rgb(217, 217, 217);   /* hairline borders, story-strip ground */
  --neutral-300: rgb(140, 140, 140);   /* muted body on dark, placeholder text */
  --neutral-400: rgb(89, 89, 89);      /* card hairline on black, muted body */
  --neutral-500: rgb(0, 0, 0);
  --neutral-600: rgb(109, 109, 109);   /* type-specimen header ground */

  /* ── Semantic aliases — site ───────────────────────────────────────────── */
  --surface-page: var(--apex-white);
  --surface-inverse: var(--apex-black);        /* hero, services, footer */
  --surface-muted: var(--neutral-100);         /* "Launch your campaign" band */
  --surface-strip: var(--neutral-200);         /* case-study story strip */
  --surface-card: var(--apex-white);
  --surface-field: var(--apex-white);
  --surface-form: var(--neutral-100);          /* Let's Talk form panel */

  --text-primary: var(--apex-black);
  --text-on-inverse: var(--apex-white);
  --text-muted: var(--neutral-400);            /* body copy on light */
  --text-muted-inverse: var(--neutral-300);    /* body copy on black */
  --text-placeholder: var(--neutral-300);
  --text-footer-label: rgba(255, 255, 255, 0.4); /* footer column headings */

  --border-hairline: var(--neutral-100);       /* nav bottom edge */
  --border-field: var(--neutral-200);          /* form field 1px inset */
  --border-strong: var(--apex-black);          /* outline button, pill */
  --border-on-inverse: var(--neutral-400);     /* social pill, service card */

  --icon-default: var(--apex-black);
  --icon-on-inverse: var(--apex-white);

  /* ── Library ramp ──────────────────────────────────────────────────────
     The form/select family in this file is an imported UI library and keeps
     its own palette. Do NOT mix these into site layouts. */
  --lib-border: rgb(234, 236, 240);
  --lib-border-strong: rgb(208, 213, 221);
  --lib-text: rgb(16, 24, 40);
  --lib-text-muted: rgb(152, 162, 179);
  --lib-slider-track: rgb(234, 236, 240);
  --lib-slider-thumb: rgb(71, 84, 103);
  --lib-radio-border: rgb(102, 112, 133);
  --lib-check-style: rgb(6, 191, 191);   /* Checkbox Type=Style, checked */
  --lib-check-general: rgb(52, 188, 70); /* Checkbox Type=General, checked */
  --lib-focus-ring: rgb(105, 54, 245);
  --lib-focus-halo: rgba(73, 151, 243, 0.2);
}