/* GENERATED from the design standalones - site-wide tokens, base, @talentxo/ui */
/* ============================================================
   Color tokens — single source of truth.
   BASE values (raw palette) + SEMANTIC aliases (intent).
   Every status color ships as a triplet {base, bg, line}:
   use bg for fill, line for border, base for text/icon.
   ============================================================ */
:root {
  /* ---- Brand (indigo-blue) ---- */
  --blue:        #2057E6;
  --blue-700:    #1A49C2;   /* hover / pressed */
  --blue-tint:   #EEF3FF;   /* soft fill */
  --blue-tint-2: #E2EAFD;   /* selection */
  --blue-line:   #CFDCFB;   /* tinted border */

  /* ---- Ink / text ---- */
  --ink:    #15181E;  /* primary text, headings */
  --ink-2:  #3A4150;  /* secondary text */
  --muted:  #6A7280;  /* tertiary / meta */
  --label:  #99A1AD;  /* field labels, faint keys */

  /* ---- Surface / lines ---- */
  --bg:      #F3F4F7; /* app background (light gray) */
  --card:    #FFFFFF; /* card / panel surface */
  --line:    #E8EAEF; /* default hairline border */
  --line-2:  #EFF1F5; /* faint inner divider */
  --field:   #F8F9FB; /* input / inset fill */

  /* ---- Semantic triplets {base, bg, line} ---- */
  --green:  #1C9457; --green-bg:  #E7F5ED; --green-line:  #CDEAD9;  /* success */
  --orange: #C9721A; --orange-bg: #FBF1E4; --orange-line: #EAD9C0;  /* warning */
  --red:    #C2453C; --red-bg:    #FBECEA; --red-line:    #F1D2CE;  /* danger  */
  --violet: #6A52C9; --violet-bg: #F0ECFB; --violet-line: #DCD3F4;  /* accent  */
  --gold:   #B8860B; --gold-bg:   #FBF4DD; --gold-line:   #ECD9A0;  /* premium */

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(32,87,230,.10);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components.
     ============================================================ */
  --text-strong:   var(--ink);
  --text-body:     var(--ink-2);
  --text-muted:    var(--muted);
  --text-label:    var(--label);
  --text-brand:    var(--blue);
  --text-on-brand: #FFFFFF;

  --surface-app:    var(--bg);
  --surface-card:   var(--card);
  --surface-inset:  var(--field);
  --surface-brand-soft: var(--blue-tint);

  --border-default: var(--line);
  --border-subtle:  var(--line-2);
  --border-brand:   var(--blue-line);

  --accent:         var(--blue);
  --accent-hover:   var(--blue-700);
}

/* ============================================================
   Typography tokens.
   --sans  → Plus Jakarta Sans : ALL UI text
   --mono  → JetBrains Mono     : ALL numbers, IDs, counts, codes
   Weights used: 500 / 600 / 700 / 800 (400 is avoided in chrome).
   Type roles map to the reference app (display/title/section/body/...).
   ============================================================ */
:root {
  /* ---- Families ---- */
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; /* @kind font */
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;          /* @kind font */
  --font-ui:      var(--sans);  /* @kind font */
  --font-numeric: var(--mono);  /* @kind font */

  /* ---- Weights ---- */
  --w-medium:   500;  /* @kind font */
  --w-semibold: 600;  /* @kind font */
  --w-bold:     700;  /* @kind font */
  --w-extra:    800;  /* @kind font */

  /* ---- Tracking ---- */
  --track-heading:  -0.02em;
  --track-monogram: -0.03em;
  --track-tight:    -0.01em;

  /* ---- Size scale (px) ---- */
  --fs-9:    9px;
  --fs-10:   10px;
  --fs-11:   11px;
  --fs-115:  11.5px;
  --fs-12:   12px;
  --fs-125:  12.5px;
  --fs-13:   13px;
  --fs-135:  13.5px;
  --fs-14:   14px;
  --fs-15:   15px;
  --fs-16:   16px;
  --fs-18:   18px;
  --fs-19:   19px;
  --fs-21:   21px;

  /* ============================================================
     ROLE ALIASES — {size + weight}. Color comes from color tokens.
     ============================================================ */
  --type-display:  800 var(--fs-21)/1.15 var(--sans);   /* page H1 */
  --type-title:    800 var(--fs-18)/1.2  var(--sans);   /* card / role title */
  --type-section:  800 var(--fs-15)/1.25 var(--sans);   /* section heading */
  --type-body:     600 var(--fs-135)/1.5 var(--sans);   /* body copy */
  --type-label:    700 var(--fs-135)/1.3 var(--sans);   /* field label (--label) */
  --type-meta:     600 var(--fs-12)/1.4  var(--sans);   /* meta / sub */
  --type-micro:    800 var(--fs-10)/1.2  var(--sans);   /* micro tag */
}

/* ============================================================
   Spacing tokens — 4px base scale.
   Card padding ≈ 16×18; section gaps 12–22.
   ============================================================ */
:root {
  --sp-2:  2px;
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-30: 30px;

  /* ---- Common composites ---- */
  --card-pad-y: 16px;
  --card-pad-x: 18px;
  --gap-tight:   8px;
  --gap-default: 12px;
  --gap-section: 22px;
}

/* ============================================================
   Radius + shadow tokens.
   Soft rounded cards (11–15); controls 8–10; pills 999.
   ============================================================ */
:root {
  /* ---- Radius ---- */
  --r-sm:      7px;   /* tags, small chips */
  --r:         11px;  /* default card / strip */
  --r-lg:      15px;  /* large card */
  --r-control: 9px;   /* buttons, inputs */
  --r-pill:    999px; /* pills, switches, badges */

  /* ---- Shadow ---- */
  --shadow:    0 1px 2px rgba(20,24,33,.04), 0 6px 20px -10px rgba(20,24,33,.14); /* raised card */
  --shadow-sm: 0 1px 2px rgba(20,24,33,.05);                                      /* resting card */
  --shadow-primary: 0 8px 16px -9px rgba(32,87,230,.8);                           /* primary button */
  --shadow-tooltip: 0 10px 30px -8px rgba(0,0,0,.45);                             /* dark tooltip */
}

/* ============================================================
   Layout + motion tokens.
   App shell: [left nav] · [filter rail] · [results].
   ============================================================ */
:root {
  /* ---- Shell widths ---- */
  --nav:           236px;  /* left nav expanded */
  --nav-collapsed: 66px;   /* left nav collapsed */
  --rail:          288px;  /* filter rail */

  /* ---- Motion ---- */
  --motion-fast: 140ms;  /* @kind other */
  --motion-base: 180ms;  /* @kind other */
  --motion-slow: 240ms;  /* @kind other */
  --ease: ease;          /* @kind other */

  /* ---- Breakpoints (reference only) ----
     1180px → filter rail overlays;  760px → grids collapse to 1 col */
  --bp-rail-overlay: 1180px;
  --bp-stack:        760px;
}

/* ============================================================
   Base resets — applied app-wide by consumers who link styles.css.
   Minimal: box-sizing, body type/background, link + selection.
   ============================================================ */
.txo-site * { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.txo-site a { color: inherit; text-decoration: none; }
.txo-site ::selection { background: var(--blue-tint-2); }
.txo-site button { font-family: var(--sans); cursor: pointer; }

/* ============================================================
   @talentxo/ui — global stylesheet entry point
   Consumers link THIS one file. It is a manifest of @imports only.
   Everything reachable from here ships to consumers (tokens + fonts).
   ============================================================ */
/* ============================================================
   Fonts — TalentXO uses two Google-hosted webfonts:
   · Plus Jakarta Sans — all UI text (weights 500/600/700/800; no 400 in chrome)
   · JetBrains Mono     — all numbers, IDs, counts, codes
   These are the genuine brand fonts (loaded by the reference app from Google
   Fonts), not substitutes. The @import below pulls in Google's @font-face rules.
   ============================================================ */
/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */


/* ============================================================
   Color tokens — single source of truth.
   BASE values (raw palette) + SEMANTIC aliases (intent).
   Every status color ships as a triplet {base, bg, line}:
   use bg for fill, line for border, base for text/icon.
   ============================================================ */
:root {
  /* ---- Brand (indigo-blue) ---- */
  --blue:        #2057E6;
  --blue-700:    #1A49C2;   /* hover / pressed */
  --blue-tint:   #EEF3FF;   /* soft fill */
  --blue-tint-2: #E2EAFD;   /* selection */
  --blue-line:   #CFDCFB;   /* tinted border */

  /* ---- Ink / text ---- */
  --ink:    #15181E;  /* primary text, headings */
  --ink-2:  #3A4150;  /* secondary text */
  --muted:  #6A7280;  /* tertiary / meta */
  --label:  #99A1AD;  /* field labels, faint keys */

  /* ---- Surface / lines ---- */
  --bg:      #F3F4F7; /* app background (light gray) */
  --card:    #FFFFFF; /* card / panel surface */
  --line:    #E8EAEF; /* default hairline border */
  --line-2:  #EFF1F5; /* faint inner divider */
  --field:   #F8F9FB; /* input / inset fill */

  /* ---- Semantic triplets {base, bg, line} ---- */
  --green:  #1C9457; --green-bg:  #E7F5ED; --green-line:  #CDEAD9;  /* success */
  --orange: #C9721A; --orange-bg: #FBF1E4; --orange-line: #EAD9C0;  /* warning */
  --red:    #C2453C; --red-bg:    #FBECEA; --red-line:    #F1D2CE;  /* danger  */
  --violet: #6A52C9; --violet-bg: #F0ECFB; --violet-line: #DCD3F4;  /* accent  */
  --gold:   #B8860B; --gold-bg:   #FBF4DD; --gold-line:   #ECD9A0;  /* premium */

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(32,87,230,.10);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components.
     ============================================================ */
  --text-strong:   var(--ink);
  --text-body:     var(--ink-2);
  --text-muted:    var(--muted);
  --text-label:    var(--label);
  --text-brand:    var(--blue);
  --text-on-brand: #FFFFFF;

  --surface-app:    var(--bg);
  --surface-card:   var(--card);
  --surface-inset:  var(--field);
  --surface-brand-soft: var(--blue-tint);

  --border-default: var(--line);
  --border-subtle:  var(--line-2);
  --border-brand:   var(--blue-line);

  --accent:         var(--blue);
  --accent-hover:   var(--blue-700);
}

/* ============================================================
   Typography tokens.
   --sans  → Plus Jakarta Sans : ALL UI text
   --mono  → JetBrains Mono     : ALL numbers, IDs, counts, codes
   Weights used: 500 / 600 / 700 / 800 (400 is avoided in chrome).
   Type roles map to the reference app (display/title/section/body/...).
   ============================================================ */
:root {
  /* ---- Families ---- */
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; /* @kind font */
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;          /* @kind font */
  --font-ui:      var(--sans);  /* @kind font */
  --font-numeric: var(--mono);  /* @kind font */

  /* ---- Weights ---- */
  --w-medium:   500;  /* @kind font */
  --w-semibold: 600;  /* @kind font */
  --w-bold:     700;  /* @kind font */
  --w-extra:    800;  /* @kind font */

  /* ---- Tracking ---- */
  --track-heading:  -0.02em;
  --track-monogram: -0.03em;
  --track-tight:    -0.01em;

  /* ---- Size scale (px) ---- */
  --fs-9:    9px;
  --fs-10:   10px;
  --fs-11:   11px;
  --fs-115:  11.5px;
  --fs-12:   12px;
  --fs-125:  12.5px;
  --fs-13:   13px;
  --fs-135:  13.5px;
  --fs-14:   14px;
  --fs-15:   15px;
  --fs-16:   16px;
  --fs-18:   18px;
  --fs-19:   19px;
  --fs-21:   21px;

  /* ============================================================
     ROLE ALIASES — {size + weight}. Color comes from color tokens.
     ============================================================ */
  --type-display:  800 var(--fs-21)/1.15 var(--sans);   /* page H1 */
  --type-title:    800 var(--fs-18)/1.2  var(--sans);   /* card / role title */
  --type-section:  800 var(--fs-15)/1.25 var(--sans);   /* section heading */
  --type-body:     600 var(--fs-135)/1.5 var(--sans);   /* body copy */
  --type-label:    700 var(--fs-135)/1.3 var(--sans);   /* field label (--label) */
  --type-meta:     600 var(--fs-12)/1.4  var(--sans);   /* meta / sub */
  --type-micro:    800 var(--fs-10)/1.2  var(--sans);   /* micro tag */
}

/* ============================================================
   Spacing tokens — 4px base scale.
   Card padding ≈ 16×18; section gaps 12–22.
   ============================================================ */
:root {
  --sp-2:  2px;
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-30: 30px;

  /* ---- Common composites ---- */
  --card-pad-y: 16px;
  --card-pad-x: 18px;
  --gap-tight:   8px;
  --gap-default: 12px;
  --gap-section: 22px;
}

/* ============================================================
   Radius + shadow tokens.
   Soft rounded cards (11–15); controls 8–10; pills 999.
   ============================================================ */
:root {
  /* ---- Radius ---- */
  --r-sm:      7px;   /* tags, small chips */
  --r:         11px;  /* default card / strip */
  --r-lg:      15px;  /* large card */
  --r-control: 9px;   /* buttons, inputs */
  --r-pill:    999px; /* pills, switches, badges */

  /* ---- Shadow ---- */
  --shadow:    0 1px 2px rgba(20,24,33,.04), 0 6px 20px -10px rgba(20,24,33,.14); /* raised card */
  --shadow-sm: 0 1px 2px rgba(20,24,33,.05);                                      /* resting card */
  --shadow-primary: 0 8px 16px -9px rgba(32,87,230,.8);                           /* primary button */
  --shadow-tooltip: 0 10px 30px -8px rgba(0,0,0,.45);                             /* dark tooltip */
}

/* ============================================================
   Layout + motion tokens.
   App shell: [left nav] · [filter rail] · [results].
   ============================================================ */
:root {
  /* ---- Shell widths ---- */
  --nav:           236px;  /* left nav expanded */
  --nav-collapsed: 66px;   /* left nav collapsed */
  --rail:          288px;  /* filter rail */

  /* ---- Motion ---- */
  --motion-fast: 140ms;  /* @kind other */
  --motion-base: 180ms;  /* @kind other */
  --motion-slow: 240ms;  /* @kind other */
  --ease: ease;          /* @kind other */

  /* ---- Breakpoints (reference only) ----
     1180px → filter rail overlays;  760px → grids collapse to 1 col */
  --bp-rail-overlay: 1180px;
  --bp-stack:        760px;
}

/* ============================================================
   Base resets — applied app-wide by consumers who link styles.css.
   Minimal: box-sizing, body type/background, link + selection.
   ============================================================ */
.txo-site * { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.txo-site a { color: inherit; text-decoration: none; }
.txo-site ::selection { background: var(--blue-tint-2); }
.txo-site button { font-family: var(--sans); cursor: pointer; }