/* SmartHR ESS 2.0 — design tokens. Generated from smarthr-design-system/project/tokens/* + ui_kits/ess_app/ess.css dark block. Edit tokens here only. */
/* ============================================================
   SmartHR — Colour tokens
   Brand: blue-dominant (commanding + calm), orange as a precise
   accent used sparingly. Mirrors the 2026 Styleguide palette.
   ============================================================ */
:root {
  /* ---- Brand: Blue family (the dominant voice) ---- */
  --shr-blue: #005A83;          /* primary brand blue */
  --shr-blue-deep: #004B70;     /* headings, hover/pressed primary */
  --shr-blue-navy: #002B3F;     /* deepest navy, high-contrast panels */
  --shr-blue-700: #00537D;
  --shr-blue-steel: #70A3BA;    /* muted blue — use on blue backgrounds only */
  --shr-blue-200: #9EE0FF;      /* bright cyan highlight */
  --shr-blue-100: #BEEBFF;
  --shr-blue-tint: #E4F2FA;     /* light blue wash — backgrounds / framing */
  --shr-watermark: #B8C9D1;     /* watermark + image overlay tone */

  /* ---- Brand: Orange family (the accent — never stands alone) ---- */
  --shr-orange: #F57B00;        /* primary accent */
  --shr-orange-deep: #E15100;   /* darker accent / hover */
  --shr-amber: #F09E00;         /* warm highlight */

  /* ---- Tertiary monochromatic ramp ----
     Use in sequence to show steps / options on WHITE backgrounds. */
  --shr-ramp-1: #E15100;
  --shr-ramp-2: #F57B00;
  --shr-ramp-3: #D87A51;
  --shr-ramp-4: #C48170;
  --shr-ramp-5: #B4908B;
  --shr-ramp-6: #A5A5A5;

  /* ---- Neutrals ---- */
  --shr-white: #FFFFFF;
  --shr-grey-50: #F5F7F9;       /* app canvas / subtle surface */
  --shr-grey-100: #EDF1F4;
  --shr-grey-200: #E2E8ED;      /* hairline borders */
  --shr-grey-300: #CBD3D9;
  --shr-grey-400: #A5A5A5;      /* tertiary text */
  --shr-grey-500: #878787;      /* secondary/tertiary text */
  --shr-grey-600: #51585E;      /* body text (secondary) */
  --shr-grey-700: #3A4147;
  --shr-black: #000000;

  /* ---- Semantic / status ---- */
  --shr-success: #47A944;
  --shr-success-tint: #CCFFD3;
  --shr-info: #0060A9;
  --shr-warning: #F09E00;
  --shr-warning-tint: #FFEDE1;
  --shr-danger: #E14B4B;
  --shr-danger-tint: #FBE3E3;

  /* ============================================================
     Semantic aliases — prefer these in components / UI
     ============================================================ */
  --color-primary: var(--shr-blue);
  --color-primary-hover: var(--shr-blue-deep);
  --color-primary-press: var(--shr-blue-navy);
  --color-accent: var(--shr-orange);
  --color-accent-hover: var(--shr-orange-deep);

  --text-heading: var(--shr-blue-deep);
  --text-body: var(--shr-grey-600);
  --text-muted: var(--shr-grey-500);
  --text-on-brand: var(--shr-white);
  --text-on-primary: var(--shr-white);  /* text on --color-primary controls; the brand may flip it to dark */
  --text-on-accent: var(--shr-white);   /* text on --color-accent marks; the brand may flip it to dark */
  --text-on-brand-soft: var(--shr-blue-100);  /* secondary text on --surface-brand; the brand moves it to stay readable */
  --text-accent: var(--color-accent);  /* the accent used as text; the brand lifts it to a readable contrast */
  --text-link: var(--shr-blue);
  --text-success: #2E8A2B;
  --text-warning: #9A6400;
  --text-danger: #C63C3C;
  --text-info: #0060A9;

  --surface-page: var(--shr-white);
  --surface-app: var(--shr-grey-50);
  --surface-card: var(--shr-white);
  --surface-tint: var(--shr-blue-tint);
  --surface-brand: var(--shr-blue);
  --surface-brand-deep: var(--shr-blue-navy);

  --border-subtle: var(--shr-grey-200);
  --border-strong: var(--shr-grey-300);
  --focus-ring: color-mix(in srgb, var(--shr-blue) 45%, transparent);

  /* ---- Avatar initials — kept separate from the blue-tint/blue-deep pair
     so dark mode can pick readable, non-inverted colours (see dark block). ---- */
  --avatar-bg: var(--shr-blue-tint);
  --avatar-fg: var(--shr-blue-deep);
}
/* ============================================================
   SmartHR — Typography tokens
   Ubuntu everywhere. Headings Bold in deep brand blue; body
   Regular in neutral grey. Bowlby One reserved for poster
   display only. Scale is restrained and professional.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-sans: 'Ubuntu', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bowlby One', 'Ubuntu', system-ui, sans-serif; /* poster headlines, UPPERCASE */

  /* ---- Weights ---- */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* ---- Type scale (rem) ---- */
  --fs-display: 4.5rem;   /* 72 — hero / poster */
  --fs-h1: 3rem;          /* 48 */
  --fs-h2: 2.25rem;       /* 36 */
  --fs-h3: 1.625rem;      /* 26 */
  --fs-h4: 1.25rem;       /* 20 */
  --fs-lg: 1.125rem;      /* 18 */
  --fs-body: 1rem;        /* 16 */
  --fs-sm: 0.875rem;      /* 14 */
  --fs-xs: 0.75rem;       /* 12 */

  /* ---- Line heights ---- */
  --lh-tight: 1.05; /* @kind other */
  --lh-heading: 1.18; /* @kind other */
  --lh-snug: 1.35; /* @kind other */
  --lh-body: 1.6; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-tight: -0.02em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide: 0.04em; /* @kind other */
  --ls-caps: 0.08em; /* @kind other */
}

/* Optional helper classes (foundations / quick prototyping) */
.shr-display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--text-heading); }
.shr-h1 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-heading); color: var(--text-heading); }
.shr-h2 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--text-heading); }
.shr-h3 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--text-heading); }
.shr-h4 { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--text-heading); }
.shr-body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.shr-eyebrow { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-primary); }
/* ============================================================
   SmartHR — Spacing, radii, shadows, motion
   The brand is clean and minimalist: soft shadows (never sharp),
   generous whitespace, gently rounded corners, pill controls.
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */

  /* ---- Radii ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;   /* nav items, buttons, chips */
  --radius-card: 16px;

  /* ---- Shadows — soft, diffuse, never sharp ---- */
  --shadow-xs: 0 1px 2px rgba(0, 43, 63, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 43, 63, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 43, 63, 0.10);
  --shadow-lg: 0 18px 48px rgba(0, 43, 63, 0.14);
  --shadow-brand: 0 12px 28px color-mix(in srgb, var(--shr-blue) 28%, transparent);
  --shadow-accent: 0 10px 22px color-mix(in srgb, var(--shr-orange) 30%, transparent);

  /* ---- Borders ---- */
  --border-width: 1px; /* @kind other */
  --border-hairline: 1px solid var(--border-subtle);

  /* ---- Motion — calm, no bounce. Fades + gentle eases. ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --sidebar-w: 264px;
}
/* ============================================================
   SmartHR — Brand motifs
   Reusable signatures of the SmartHR visual language:
   • the WAVE (organic shape that frames & bleeds off the page)
   • the HALFTONE dot watermark
   • the ORGANIC image frame + offset accent shape
   These are decoration utilities; tokens live in the other files.
   ============================================================ */

/* ---- WAVE divider ----------------------------------------------------
   Place at top or bottom of a section. One wave per surface; vary its
   position between consecutive surfaces. Always let it bleed full-width. */
.shr-wave {
  display: block;
  width: 100%;
  height: auto;
  line-height: 0;
}
/* Curved bottom edge for a coloured band (cuts INTO the band) */
.shr-wave-bottom {
  clip-path: ellipse(75% 100% at 50% 0%);
}
/* Curved top edge */
.shr-wave-top {
  clip-path: ellipse(75% 100% at 50% 100%);
}

/* ---- HALFTONE watermark ---------------------------------------------
   Radial dot field. On blue surfaces use the white variant at low alpha;
   on white surfaces use the steel variant. Park it in a corner, partly
   off-page. */
.shr-halftone {
  background-image: radial-gradient(currentColor 22%, transparent 23%);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, #000 35%, transparent 78%);
          mask-image: radial-gradient(closest-side, #000 0%, #000 35%, transparent 78%);
}
.shr-halftone-on-blue { color: rgba(255, 255, 255, 0.40); }
.shr-halftone-on-white { color: var(--shr-watermark); opacity: 0.5; }

/* ---- ORGANIC image frame --------------------------------------------
   Photos are framed in a soft organic blob (never a hard square or a
   perfect circle) and carry a cool brand-tinted overlay. Pair with an
   offset accent shape behind it in a primary colour. */
.shr-photo {
  position: relative;
  display: inline-block;
  border-radius: 42% 58% 62% 38% / 52% 40% 60% 48%;
  overflow: hidden;
  isolation: isolate;
}
.shr-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shr-photo::after {                 /* cool brand overlay */
  content: "";
  position: absolute; inset: 0;
  background: var(--shr-watermark);
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.shr-photo-offset {                 /* coloured shape peeking behind */
  position: relative;
  display: inline-block;
}
.shr-photo-offset > .shr-photo { position: relative; z-index: 1; }
.shr-photo-offset::before {
  content: "";
  position: absolute;
  left: -24px; bottom: -24px;
  width: 100%; height: 100%;
  border-radius: 58% 42% 40% 60% / 45% 58% 42% 55%;
  background: var(--color-accent);
  z-index: 0;
}

/* ---- Brand surfaces --------------------------------------------------- */
.shr-surface-brand {
  background: var(--surface-brand);
  color: var(--text-on-brand);
}
.shr-surface-tint { background: var(--surface-tint); color: var(--text-body); }

/* A short orange rule that sits under section titles (styleguide signature) */
.shr-rule {
  width: 56px; height: 4px;
  background: var(--color-accent);
  border: 0; border-radius: 2px;
  margin: 12px 0 0;
}

/* ---- dark theme (from ess.css) ---- */
[data-theme="dark"]{
  --surface-app:#0E1A21;--surface-card:#17272F;--surface-page:#17272F;--surface-tint:#173242;--surface-brand:#0B4A6B;--surface-brand-deep:#08202D;
  --shr-blue:#0B4A6B;--shr-blue-deep:#083A55;--shr-blue-navy:#08202D;--shr-blue-tint:#173242;--shr-blue-100:#9CD1EA;
  --shr-grey-50:#1D2E37;--shr-grey-100:#22343E;--shr-grey-200:#2C4049;--shr-grey-300:#3B5160;--shr-grey-400:#7A8F9B;--shr-grey-500:#93A6B1;--shr-grey-600:#C4D1D9;--shr-grey-700:#DCE6EC;
  --color-primary:#3D9BC8;--color-primary-hover:#5FB0D6;--color-primary-press:#2C7EA6;
  --text-heading:#EAF3F8;--text-body:#C4D1D9;--text-muted:#93A6B1;--text-link:#6DBCE2;
  --text-success:#7ED07A;--text-warning:#F5C26B;--text-danger:#F19999;--text-info:#7FC4E8;
  --shr-success:#7ED07A;--shr-danger:#F19999;
  --border-subtle:#25383F;--border-strong:#35505C;
  --shr-success-tint:#163A21;--shr-warning-tint:#3B2A12;--shr-danger-tint:#3F1C1E;
  --avatar-bg:#173242;--avatar-fg:#9CD1EA;
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);--shadow-sm:0 2px 8px rgba(0,0,0,.35);--shadow-md:0 8px 24px rgba(0,0,0,.4);--shadow-lg:0 18px 48px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ---- light theme: the index pages allow both schemes (<meta name="color-scheme" content="light dark">), so the light
   page says so itself, or a dark device draws its scrollbars, inputs and canvas dark under it. After the dark block,
   which StatusInfoTests finds as the first [data-theme="dark"] in this file. ---- */
:root:not([data-theme="dark"]){color-scheme:light}