/* =====================================================================
   PeopleWeb — Colors, Type & Tokens
   The single source of truth for foundational design decisions.
   Import this file before any UI CSS.
   ===================================================================== */

/* --- Fuentes ------------------------------------------------------- */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/sora-300.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/sora-400.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/sora-600.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/sora-700.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-700.woff2") format("woff2");
}

:root {
  /* ===================================================================
     COLOR — Brand / primary
     The PeopleWeb identity rests on two colors: a deep midnight navy
     used for navbars and structural chrome, and a friendly indigo used
     for primary actions, the dashboard header band, and brand accents.
     ================================================================ */
  --pw-navy-900:    #11203D;   /* deep navy — footers, deep gradients */
  --pw-navy-800:    #1B2E55;
  --pw-navy-700:    #2A3F6F;
  --pw-navy-100:    #E5EAF4;   /* navy tint, focus rings on light */

  /* NAVBAR — steel-blue (matches legacy --sidebar-hover #4B6DA4) */
  --pw-nav-blue:       #4B6DA4;   /* PRIMARY navbar surface */
  --pw-nav-blue-dark:  #3D5A8C;   /* hover / pressed on navbar */
  --pw-nav-blue-light: #6D8AC0;   /* subtle hover bg for icon btns */

  --pw-indigo-700:  #4F5FC9;
  --pw-indigo-600:  #5A6FD8;   /* primary button hover */
  --pw-indigo-500:  #667EEA;   /* PRIMARY — dashboard band, links, focus */
  --pw-indigo-400:  #8B9BF1;
  --pw-indigo-100:  #E8ECFC;   /* badge bg, hover tint */
  --pw-indigo-50:   #F3F5FE;

  --pw-violet-500:  #764BA2;   /* paired with indigo for the brand gradient */

  /* The signature PeopleWeb gradient (use sparingly: dashboard hero,
     KPI accent rails, marketing surfaces — never as a full-page bg). */
  --pw-grad-brand:   linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  --pw-grad-banner:  linear-gradient(135deg, #667EEA 0%, #5A6FD8 100%);

  /* ===================================================================
     COLOR — Neutrals (greys)
     A 10-step ramp anchored on slate undertones. Backgrounds, borders,
     and text all sample from here so the UI reads neutral, not warm.
     ================================================================ */
  --pw-grey-50:   #F8F9FA;   /* app canvas / sidebar bg */
  --pw-grey-100:  #F1F3F5;   /* zebra stripes, hover bg */
  --pw-grey-200:  #E9ECEF;   /* input border, divider */
  --pw-grey-300:  #DEE2E6;   /* card border (subtle) */
  --pw-grey-400:  #CED4DA;
  --pw-grey-500:  #ADB5BD;   /* placeholder */
  --pw-grey-600:  #6C757D;   /* secondary text, icons */
  --pw-grey-700:  #495057;   /* sidebar text */
  --pw-grey-800:  #343A40;
  --pw-grey-900:  #2C3E50;   /* headings on light bg */
  --pw-black:     #11181F;

  --pw-white:     #FFFFFF;

  /* ===================================================================
     COLOR — Semantic (status, KPI accents)
     ================================================================ */
  --pw-success-700: #1E7E34;
  --pw-success-500: #27AE60;
  --pw-success-100: #D4EDDA;

  --pw-warning-700: #B8860B;
  --pw-warning-500: #F39C12;   /* "Estable" trend, neutral trend chip */
  --pw-warning-100: #FFF3CD;

  --pw-danger-700:  #B21F2D;
  --pw-danger-500:  #E74C3C;   /* "Salir" button, negative trend */
  --pw-danger-100:  #F8D7DA;

  --pw-info-500:    #4FACFE;
  --pw-info-100:    #D1ECF1;

  /* KPI palette — solid, vibrant-but-grounded. One per metric category. */
  --pw-kpi-people:    #4F5FC9;   /* indigo */
  --pw-kpi-turnover:  #E55A6E;   /* coral */
  --pw-kpi-absence:   #2BB3C0;   /* teal */
  --pw-kpi-cost:      #2EA363;   /* green */
  --pw-kpi-age:       #E89B3C;   /* amber */
  --pw-kpi-tenure:    #8E7CC3;   /* muted violet */
  --pw-kpi-supervisor:#5C7FBA;   /* slate-blue */
  --pw-kpi-gender:    #C26B82;   /* rose */

  /* ===================================================================
     SEMANTIC ALIASES — use these in components, not the raw scales
     ================================================================ */
  --fg-1: var(--pw-grey-900);         /* headings, primary text */
  --fg-2: var(--pw-grey-700);         /* body */
  --fg-3: var(--pw-grey-600);         /* secondary / labels */
  --fg-4: var(--pw-grey-500);         /* placeholder, disabled */
  --fg-on-brand: var(--pw-white);

  --bg-app:        var(--pw-grey-50);
  --bg-surface:    var(--pw-white);    /* cards, panels */
  --bg-surface-2:  var(--pw-grey-100); /* nested, table head */
  --bg-sidebar:    var(--pw-grey-50);
  --bg-navbar:     var(--pw-nav-blue);
  --bg-overlay:    rgba(17, 24, 31, 0.55);

  --border-subtle:  var(--pw-grey-200);
  --border-default: var(--pw-grey-300);
  --border-strong:  var(--pw-grey-400);
  --border-focus:   var(--pw-indigo-500);

  --link:           var(--pw-indigo-500);
  --link-hover:     var(--pw-indigo-700);

  /* ===================================================================
     TYPE — Families
     Sora (sans, geometric, friendly-but-serious) is the brand face.
     JetBrains Mono for data, IDs, code, tabular numbers when needed.
     System fonts cover when Sora isn't loaded.
     ================================================================ */
  --font-sans:    "Sora", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Courier New", monospace;
  --font-display: "Sora", "Helvetica Neue", sans-serif;  /* for hero titles */

  /* Type scale — modular, 1.2 ratio, 16px base.
     Use these as line-heights paired w/ the size. Numbers are in px so
     designers can math freely. */
  --fs-12: 12px;   --lh-12: 16px;   /* micro labels, badges */
  --fs-13: 13px;   --lh-13: 18px;   /* small / table dense */
  --fs-14: 14px;   --lh-14: 20px;   /* body small / form labels */
  --fs-16: 16px;   --lh-16: 24px;   /* body */
  --fs-18: 18px;   --lh-18: 26px;   /* body large / lead */
  --fs-20: 20px;   --lh-20: 28px;   /* h5 / section eyebrow */
  --fs-24: 24px;   --lh-24: 32px;   /* h4 / card title */
  --fs-28: 28px;   --lh-28: 36px;   /* h3 */
  --fs-32: 32px;   --lh-32: 40px;   /* KPI value */
  --fs-40: 40px;   --lh-40: 48px;   /* h2 / dashboard title */
  --fs-48: 48px;   --lh-48: 56px;   /* h1 / hero */

  /* Font weights — Sora supports these four */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ===================================================================
     SPACING — 4px base, all multiples of 4
     ================================================================ */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ===================================================================
     RADII — moderate, with one big "card" radius for the soft look
     ================================================================ */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;       /* buttons, inputs */
  --r-lg:  12px;
  --r-xl:  15px;      /* PRIMARY card radius (matches dashboard.css) */
  --r-2xl: 20px;
  --r-pill: 999px;    /* badges, country chip */

  /* ===================================================================
     SHADOWS — three steps. Cards float gently; modals float a lot.
     ================================================================ */
  --shadow-xs:    0 1px 2px rgba(17, 24, 31, 0.06);
  --shadow-sm:    0 2px 4px rgba(17, 24, 31, 0.06);
  --shadow-card:  0 5px 15px rgba(0, 0, 0, 0.08);   /* the default card lift */
  --shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.15);  /* hover/raised state */
  --shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.20);
  --shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.10);

  /* Focus ring — accessible halo for keyboard users */
  --ring-focus: 0 0 0 3px rgba(102, 126, 234, 0.25);

  /* ===================================================================
     LAYOUT TOKENS — fixed structural sizes
     ================================================================ */
  --nav-height: 60px;
  --sidebar-width: 260px;
  --sidebar-collapsed: 70px;
  --container-max: 1400px;

  /* Motion */
  --t-fast:  150ms;
  --t-base:  250ms;
  --t-slow:  400ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================================
   TYPOGRAPHY — semantic element styles
   These let raw HTML look right by default. Components can override.
   ===================================================================== */

html { font-family: var(--font-sans); }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--fg-2);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .pw-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  line-height: var(--lh-40);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h2, .pw-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  line-height: var(--lh-28);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h3, .pw-h3 {
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
h4, .pw-h4 {
  font-size: var(--fs-20);
  line-height: var(--lh-20);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
h5, .pw-h5 {
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
h6, .pw-h6 {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

p, .pw-body {
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--fg-2);
  text-wrap: pretty;
}
.pw-small {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
}
.pw-caption {
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--fg-3);
}
.pw-label {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.pw-kpi-value {
  font-size: var(--fs-32);
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.pw-mono, code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration: underline; }

/* Numbers in tables — use tabular numerals so columns align */
.pw-num, td.pw-num, .pw-table td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Focus styles — accessible halo */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-color: var(--border-focus);
}