/* Design tokens — the same names HRLocker.UI/mvc/app/root.less publishes on :root, with the values
 * from HRLocker.UI/mvc/bootstrap/variables.less written out, because this host has no LESS build.
 * Keep the two in step: a token added there is added here under the same name.
 *
 * Below the palette are the few tokens this host adds (marked "Accounts"): the surface tokens that
 * let the pages follow a light or dark colour scheme, and the product accent. Everything else in
 * the stylesheets reads tokens; no literal colours or sizes outside this file.
 */
:root {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    --hrl-grey-100: #E8E8E8;
    --hrl-grey-200: #D4D4D4;
    --hrl-grey-300: #BABABA;
    --hrl-grey-400: #A1A1A1;
    --hrl-grey-500: #878787;
    --hrl-grey-600: #6E6E6E;
    --hrl-grey-700: #545454;
    --hrl-grey-800: #3B3B3B;
    --hrl-grey-900: #212121;

    --hrl-blue-100: #DEE4FD;
    --hrl-blue-200: #C6D1FB;
    --hrl-blue-300: #96ABF8;
    --hrl-blue-400: #6685F4;
    --hrl-blue-500: #375FF1;
    --hrl-blue-600: #103EE5;
    --hrl-blue-700: #0D31B5;
    --hrl-blue-800: #092485;
    --hrl-blue-900: #061756;

    --hrl-green-100: #AFF8E2;
    --hrl-green-200: #77F3CE;
    --hrl-green-300: #44EEBB;
    --hrl-green-400: #14E1A4;
    --hrl-green-500: #10B181;
    --hrl-green-600: #0C835F;
    --hrl-green-700: #08543D;
    --hrl-green-800: #063D2C;
    --hrl-green-900: #032A1F;

    --hrl-yellow-100: #FDEED8;
    --hrl-yellow-200: #FAD9A8;
    --hrl-yellow-300: #F8CA86;
    --hrl-yellow-400: #F7BE69;
    --hrl-yellow-500: #F5AE45;
    --hrl-yellow-600: #F39A17;
    --hrl-yellow-700: #CB7E0B;
    --hrl-yellow-800: #4D3004;
    --hrl-yellow-900: #261702;

    --hrl-orange-100: #FFDECC;
    --hrl-orange-200: #FFCDB2;
    --hrl-orange-300: #FFAC80;
    --hrl-orange-400: #FF8B4D;
    --hrl-orange-500: #FF6C1C;
    --hrl-orange-600: #F05400;
    --hrl-orange-700: #C74600;
    --hrl-orange-800: #A83B00;
    --hrl-orange-900: #662400;

    --hrl-maroon-100: #E3BABA;
    --hrl-maroon-200: #D49696;
    --hrl-maroon-300: #C67171;
    --hrl-maroon-400: #B74D4D;
    --hrl-maroon-500: #953C3C;
    --hrl-maroon-600: #863737;
    --hrl-maroon-700: #6F2D2D;
    --hrl-maroon-800: #502020;
    --hrl-maroon-900: #361616;

    --hrl-red-100: #FFBDBD;
    --hrl-red-200: #FFA8A8;
    --hrl-red-300: #FF8080;
    --hrl-red-400: #FF4D4D;
    --hrl-red-500: #FF1A1A;
    --hrl-red-600: #E50000;
    --hrl-red-700: #B20000;
    --hrl-red-800: #6B0000;
    --hrl-red-900: #3D0000;

    --hrl-purple-100: #D3D1FF;
    --hrl-purple-200: #C4C2FF;
    --hrl-purple-300: #B0ADFF;
    --hrl-purple-400: #AE9EFF;
    --hrl-purple-500: #9C7AFF;
    --hrl-purple-600: #925CFF;
    --hrl-purple-700: #801FFF;
    --hrl-purple-800: #35007A;
    --hrl-purple-900: #1F0047;

    --hrl-sand-100: #F5F1ED;
    --hrl-sand-200: #F1EAE4;
    --hrl-sand-300: #F3E4D3;
    --hrl-sand-400: #EED9C0;
    --hrl-sand-500: #E3C097;
    --hrl-sand-600: #D8A76E;
    --hrl-sand-700: #CD8F46;
    --hrl-sand-800: #B17530;
    --hrl-sand-900: #895B25;

    --hrl-shadow-color: #E3E1DD; /* 0 2px 0 card/panel shadow */
    --hrl-pink-500: #E82672;
    --hrl-cyan-500: #29ABE2;

    --hrl-space-2xs: 2px;
    --hrl-space-xs: 4px;
    --hrl-space-s: 8px;
    --hrl-space-m: 12px;
    --hrl-space-l: 16px;
    --hrl-space-xl: 24px;
    --hrl-space-2xl: 32px;
    --hrl-space-3xl: 40px;
    --hrl-space-4xl: 48px;
    --hrl-space-5xl: 56px;
    --hrl-space-6xl: 64px;
    --hrl-space-7xl: 72px;
    --hrl-space-8xl: 80px;

    --hrl-shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.12);

    --hrl-text-color: #131313;
    --hrl-white: #FFFFFF;
    --hrl-black: #131313;

    --hrl-font-family-base: "Inter", Helvetica, Arial, sans-serif;
    --hrl-font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;

    --hrl-font-size-base: 14px;
    --hrl-font-size-large: 18px;
    --hrl-font-size-medium: 16px;
    --hrl-font-size-small: 14px;
    --hrl-font-size-tiny: 12px;
    --hrl-font-size-nano: 10px;

    --hrl-font-size-h1: 32px;
    --hrl-font-size-h2: 24px;
    --hrl-font-size-h3: 20px;

    --hrl-font-weight-base: 400;
    --hrl-font-weight-heading: 600;

    --hrl-line-height-base: 1.5;
    --hrl-line-height-tiny: 1.28;
    --hrl-line-height-heading: 1.1;

    --hrl-letter-spacing-heading: -0.005em;

    --hrl-border-radius-small: 3px;
    --hrl-border-radius-base: 4px;
    --hrl-border-radius-large: 6px;
    --hrl-border-radius-xl: 8px;
    --hrl-border-radius-pill: 9999px;

    /* Layout dimensions (@topbar-height, @sidebar-width). */
    --hrl-topbar-height: 72px;
    --hrl-sidebar-width: 240px;

    /* ------------------------------------------------------------------------------------------
     * Accounts: colour scheme. The palette above is the light design system; the pages follow the
     * system scheme unless the person pinned one (the switcher writes <html data-theme>). These
     * surface tokens are the only ones that change: a literal light value first for browsers
     * without light-dark(), then the pair.
     * ---------------------------------------------------------------------------------------- */
    color-scheme: light dark;

    --hrl-canvas: var(--hrl-sand-100);
    --hrl-canvas: light-dark(var(--hrl-sand-100), #14171D);
    --hrl-canvas-public: var(--hrl-sand-200);
    --hrl-canvas-public: light-dark(var(--hrl-sand-200), #14171D);
    --hrl-surface: var(--hrl-white);
    --hrl-surface: light-dark(var(--hrl-white), #1C2129);
    --hrl-surface-muted: var(--hrl-sand-100);
    --hrl-surface-muted: light-dark(var(--hrl-sand-100), #262C36);
    /* A tint for table heads and grouped rows: grey-100 (the border colour) read as shading. */
    --hrl-surface-tint: color-mix(in srgb, var(--hrl-grey-100) 43.5%, var(--hrl-white));
    --hrl-surface-tint: light-dark(color-mix(in srgb, var(--hrl-grey-100) 43.5%, var(--hrl-white)), #222833);
    --hrl-surface-shadow: var(--hrl-shadow-color);
    --hrl-surface-shadow: light-dark(var(--hrl-shadow-color), #0F1217);
    --hrl-text: var(--hrl-text-color);
    --hrl-text: light-dark(var(--hrl-text-color), #E8E6E3);
    --hrl-text-muted: var(--hrl-grey-700);
    --hrl-text-muted: light-dark(var(--hrl-grey-700), #B4B8BF);
    --hrl-text-subtle: var(--hrl-grey-600);
    --hrl-text-subtle: light-dark(var(--hrl-grey-600), #A3A7AE);
    --hrl-border: var(--hrl-grey-100);
    --hrl-border: light-dark(var(--hrl-grey-100), #2E3541);
    --hrl-border-strong: var(--hrl-grey-200);
    --hrl-border-strong: light-dark(var(--hrl-grey-200), #3A4250);
    --hrl-control-bg: var(--hrl-white);
    --hrl-control-bg: light-dark(var(--hrl-white), #14171D);
    --hrl-control-border: #CCCCCC;
    --hrl-control-border: light-dark(#CCCCCC, #3A4250);
    --hrl-link: var(--hrl-blue-500);
    --hrl-link: light-dark(var(--hrl-blue-500), var(--hrl-blue-300));
    --hrl-link-hover: var(--hrl-blue-600);
    --hrl-link-hover: light-dark(var(--hrl-blue-600), var(--hrl-blue-200));
    --hrl-danger: var(--hrl-red-700);
    --hrl-danger: light-dark(var(--hrl-red-700), var(--hrl-red-200));
    --hrl-focus-ring: var(--hrl-blue-300);
    --hrl-focus-ring: light-dark(var(--hrl-blue-300), var(--hrl-blue-400));

    /* Accounts: the product accent (primary button, links, focus). HRLocker blue by default; the
       public pages switch it per product through body.theme-<key> (see pages/login.css). */
    --hrl-primary: var(--hrl-blue-600);
    --hrl-primary: light-dark(var(--hrl-blue-600), var(--hrl-blue-300));
    --hrl-primary-hover: var(--hrl-blue-700);
    --hrl-primary-hover: light-dark(var(--hrl-blue-700), var(--hrl-blue-200));
    --hrl-primary-active: var(--hrl-blue-800);
    --hrl-primary-active: light-dark(var(--hrl-blue-800), var(--hrl-blue-100));
    --hrl-on-primary: var(--hrl-white);
    --hrl-on-primary: light-dark(var(--hrl-white), var(--hrl-blue-900));
}

/* The switcher pins a scheme; light-dark() follows color-scheme, so this is the whole mechanism. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }