/* LeaveDesk shared design tokens.
 *
 * These 45 custom properties were previously duplicated across the five role
 * dashboards' own :root blocks. Every one of them was verified to carry an IDENTICAL
 * value in every dashboard that declared it, and to be used only by dashboards that
 * declared it — so hoisting them here changes no rendering anywhere.
 *
 * Declared on :root so one file serves both worlds: a dashboard opened standalone gets
 * them from its own <html>, and a dashboard mounted into the SPA inherits them through
 * #ld-view (custom properties survive its `all: initial`) down to #ld-doc.
 *
 * DELIBERATELY NOT HOISTED — moving these would change how a dashboard renders:
 *
 *   --border, --border-md   every dashboard defines these with a DIFFERENT value
 *                           (var(--color-border-*) / rgba(0,0,0,…) / rgba(28,27,24,…)).
 *   --sidebar-w             214px in hr-admin and ca-admin, 220px in superadmin.
 *   --coral, --green-dk     ca-admin USES both without defining them, so they currently
 *                           fall back; defining them globally would restyle it.
 *   --text3                 emp_helpers.js emits var(--text3, var(--color-text-secondary))
 *                           into all five dashboards, but only hr-admin, ca-admin and
 *                           superadmin define it. Hoisting would change the pager text
 *                           colour in employee and manager.
 *
 * Those five stay in the per-dashboard :root blocks that already had them. A local
 * declaration on #ld-doc also outranks this file by proximity, so any dashboard can
 * still override a token below without touching this file.
 */

:root {
  /* Brand / accent */
  --teal: #1D9E75;
  --teal-lt: #E1F5EE;
  --teal-dk: #085041;
  --teal-mid: #0F6E56;
  --teal-bright: #0F6E56;
  --accent: #1D9E75;

  /* Status hues */
  --blue: #185FA5;
  --blue-lt: #E6F1FB;
  --blue-dk: #0C447C;
  --blue-bright: #0C447C;

  --amber: #BA7517;
  --amber-lt: #FAEEDA;
  --amber-dk: #633806;
  --amber-bright: #633806;

  --red: #A32D2D;
  --red-lt: #FCEBEB;
  --red-dk: #791F1F;
  --red-bright: #791F1F;

  --green: #3B6D11;
  --green-lt: #EAF3DE;
  --green-bright: #27500A;

  --purple: #534AB7;
  --purple-lt: #EEEDFE;
  --purple-dk: #3C3489;
  --purple-bright: #3C3489;

  --coral-lt: #FAECE7;
  --coral-dk: #712B13;

  /* Surfaces */
  --bg: #F0EEE9;
  --bg2: #FFFFFF;
  --bg3: #F7F6F2;
  --bg4: #F0EEE9;
  --bg5: #E7E4DC;
  --surface: #FFFFFF;
  --surface2: #F7F6F2;
  --surface3: #F0EEE9;
  --gray-lt: #F1EFE8;

  /* Text */
  --text1: #1C1B18;
  --text2: #828280;
  --text4: #CDCDCC;

  /* Borders that do not vary */
  --border-bright: 0.5px solid rgba(28,27,24,0.28);

  /* Radii */
  --rad: 10px;
  --rad-sm: 7px;
  --rad-xs: 5px;

  /* Type */
  --sans: 'Segoe UI',system-ui,sans-serif;
  --mono: 'Segoe UI',system-ui,sans-serif;

  /* --color-* and --font-sans aliases: employee_self_service.html, auth_account_pages.html
   * and general_utility_pages.html reference this naming scheme for form controls
   * (.finput/.fselect borders and backgrounds) but it was never defined anywhere,
   * so those inputs rendered with no visible border/background. Aliased onto the
   * equivalent tokens above rather than introducing a second color system. */
  --color-background-primary: var(--surface);
  --color-background-secondary: var(--bg2);
  --color-background-tertiary: var(--bg3);
  --color-text-primary: var(--text1);
  --color-text-secondary: var(--text2);
  --color-text-tertiary: var(--text4);
  --color-border-secondary: rgba(28,27,24,0.16);
  --color-border-tertiary: rgba(28,27,24,0.10);
  --font-sans: var(--sans);
}