/*
  Sakhi Manpower Design System — Tokens
  Single source of truth for color, type, spacing and elevation.
  Every other stylesheet in this app reads these custom properties instead of
  hardcoding values. Do not add page-specific color literals — extend this file.
*/
:root{
  /* ---- Brand color scale (purple/lavender, carried forward from the most-refined
     prior iteration of this app's look, now unified into one place) ---- */
  --color-primary:#5B2CC9;
  --color-primary-dark:#24104F;
  --color-primary-light:#7C3AED;
  --color-secondary:#DB2777;
  --color-accent:#F59E0B;

  --color-bg:#FBF8FF;
  --color-surface:#FFFFFF;
  --color-surface-2:#F5F0FF;
  --color-border:#E4D8FF;
  --color-border-strong:#C9B8EF;

  --color-text:#17122B;
  --color-text-secondary:#6B6B7A;
  --color-text-on-primary:#FFFFFF;
  --color-text-on-dark:#EDE7FF;

  --color-success:#0D8B54;
  --color-success-bg:#E9FFF4;
  --color-success-border:#B9F4D5;
  --color-warning:#B76C00;
  --color-warning-bg:#FFF6E3;
  --color-warning-border:#FCE3A8;
  --color-error:#BC2626;
  --color-error-bg:#FFECEC;
  --color-error-border:#FAC7C7;
  --color-info:#1D4ED8;
  --color-info-bg:#E8EEFF;
  --color-info-border:#C7D6FF;

  /* Sidebar / dark-surface scale (used only by the app shell) */
  --color-shell-bg-start:#24104F;
  --color-shell-bg-end:#17092F;
  --color-shell-text:#DAD0F5;
  --color-shell-text-muted:#B7A8DE;

  /* ---- Typography ---- */
  --font-family:Inter,Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-size-xs:.75rem;      /* 12px — helper text, meta, badges */
  --font-size-sm:.8125rem;    /* 13px — form labels, table headers */
  --font-size-base:.9375rem;  /* 15px — body text */
  --font-size-md:1.0625rem;   /* 17px — card titles */
  --font-size-lg:1.25rem;     /* 20px — section headings */
  --font-size-xl:1.625rem;    /* 26px — page titles */
  --font-size-2xl:2.125rem;   /* 34px — hero/stat numbers */
  --font-size-3xl:clamp(2.25rem,4.5vw,3.5rem); /* public hero */
  --font-weight-regular:500;
  --font-weight-medium:650;
  --font-weight-bold:800;
  --font-weight-black:900;
  --line-height-tight:1.15;
  --line-height-base:1.6;

  /* ---- Spacing scale (4/8/12/16/24/32/48) ---- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;

  /* ---- Radius ---- */
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;

  /* ---- Elevation ---- */
  --shadow-sm:0 8px 22px rgba(36,16,79,.06);
  --shadow-md:0 18px 45px rgba(36,16,79,.10);
  --shadow-lg:0 28px 70px rgba(36,16,79,.16);
  --focus-ring:0 0 0 .22rem rgba(91,44,201,.18);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --duration-fast:.16s;
  --duration-base:.22s;
}

@media (prefers-color-scheme: dark){
  /* Reserved for a future dark theme; app currently ships light-only by design
     (recruitment/back-office data density reads better on a light surface),
     but tokens are isolated here so a dark variant is a token-only change. */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-family);
  color:var(--color-text);
  background:var(--color-bg);
  font-size:var(--font-size-base);
  line-height:var(--line-height-base);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(91,44,201,.18);color:var(--color-primary-dark)}
:focus-visible{outline:0!important;box-shadow:var(--focus-ring)!important;border-color:var(--color-primary)!important}

h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-black);letter-spacing:-.02em;color:var(--color-text);margin:0}
.text-muted,.ui-muted{color:var(--color-text-secondary)!important}
.eyebrow,.ui-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-primary);border-radius:var(--radius-pill);padding:.42rem .72rem;font-weight:var(--font-weight-black);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.06em}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
}