/* ------------------------------------------------------------------
   HireGate HR — design system v3 tokens
   These values are the system. Change them here, nowhere else.
   Adopted 7 September 2026. Do not add a token without a decision.
   ------------------------------------------------------------------ */

:root{
  /* --- Colour ------------------------------------------------------
     The one rule: green means outcomes, blue means actions.
     If it can be clicked it is blue. If it reports something that
     already happened it is green. Nothing is green because it looked
     nice there.
     --------------------------------------------------------------- */

  /* Actions — blue */
  --hg-blue-600:#1C4EEB;   /* every action: buttons, links, active states. 6.3:1 on white */
  --hg-blue-700:#1740C7;   /* hover on blue. 8.4:1 on white */
  --hg-blue-50:#E7ECFB;    /* icon chips, selected filters, in-progress states */

  /* Outcomes — green.
     green-500 is 2.6:1 on white. It NEVER touches text, icon or border
     on a light ground. Light grounds use green-700. */
  --hg-green-500:#1CB57F;  /* DARK GROUNDS ONLY — logo bar, stat numbers on ink-navy. 6.6:1 there */
  --hg-green-700:#0A7C58;  /* light grounds — ticks, overlines, "Placed". 5.2:1 on white */
  --hg-green-50:#E6F2EB;   /* completed and confirmed rows */

  /* Ink and ground */
  --hg-ink-navy:#121A24;   /* dark bands, footer. 17.5:1 vs white */
  --hg-head:#1F2630;       /* all headlines, wordmark. 13.8:1 on white */
  --hg-ink:#1A1E24;        /* body text. 15.6:1 on white */
  --hg-muted:#6E7078;      /* captions, meta, secondary text. 4.9:1 on white */
  --hg-border:#E5E2DC;     /* card and input borders, dividers */
  --hg-surface:#F5F4F1;    /* alternating section ground — WARM, deliberately not a cool grey */
  --hg-white:#FFFFFF;

  /* State */
  --hg-warning:#B45309;    /* form validation only */
  --hg-error:#B42318;      /* form errors only */
  --hg-disabled-bg:#EDEBE6;
  --hg-disabled-fg:#9A988F;

  /* --- Type --------------------------------------------------------
     Manrope headlines, Inter body. Both self-hosted where the woff2
     files are present; otherwise Elementor's local Google Fonts.
     --------------------------------------------------------------- */
  --hg-font-head:'Manrope','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --hg-font-body:'Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;

  --hg-h1:64px;  --hg-h1-lh:1.05; --hg-h1-ls:-0.035em;
  --hg-h2:44px;  --hg-h2-lh:1.12; --hg-h2-ls:-0.028em;
  --hg-h3:28px;  --hg-h3-lh:1.25; --hg-h3-ls:-0.01em;
  --hg-h4:20px;  --hg-h4-lh:1.3;  --hg-h4-ls:-0.005em;
  --hg-body:17px; --hg-body-lh:1.6;
  --hg-small:14px; --hg-small-lh:1.5;
  --hg-overline:13px; --hg-overline-ls:0.08em;
  --hg-stat:48px;

  /* --- Shape — NO PILLS. A 999px radius anywhere is a bug. -------- */
  --hg-radius-button:6px;
  --hg-radius-card:8px;
  --hg-radius-chip:4px;
  --hg-radius-input:6px;

  /* --- Spacing — 4-point base ------------------------------------ */
  --hg-space-1:4px;   --hg-space-2:8px;   --hg-space-3:12px;
  --hg-space-4:16px;  --hg-space-6:24px;  --hg-space-8:32px;
  --hg-space-12:48px; --hg-space-16:64px; --hg-space-20:80px;
  --hg-space-30:120px;

  /* --- Layout ----------------------------------------------------- */
  --hg-content-width:1200px;
  --hg-gutter:24px;
  --hg-section-y:80px;
  --hg-header-height:72px;
  --hg-reading-width:720px;

  /* --- Component metrics ------------------------------------------ */
  --hg-control-height:48px;      /* buttons and inputs */
  --hg-touch-min:44px;
  --hg-card-padding:24px;
  --hg-icon-chip:40px;
  --hg-transition:150ms ease;
}

@media (max-width:768px){
  :root{
    --hg-h1:38px;
    --hg-h2:32px;
    --hg-h3:22px;
    --hg-h4:18px;
    --hg-body:16px;
    --hg-stat:36px;
    --hg-section-y:56px;
  }
}