/* ==========================================================================
   NexuAttend — Design System Foundation (tokens.css)  ·  v2 (2026-06-07)
   SINGLE SOURCE OF TRUTH for the entire product look. Every page imports this
   first. Identity: dense, premium, information-rich SaaS — Linear / Vercel /
   Attio. Indigo brand, cool slate neutrals, Inter (body) + JetBrains Mono
   (numbers/times/codes). Compact, breathable, NOT spacious-and-large.
   (Replaces the previous orange / Plus-Jakarta system — full rebrand.)
   ========================================================================== */

/* ----- Design tokens ----------------------------------------------------- */
:root {
  /* Brand — indigo */
  --brand:        #5B6EF5; /* primary */
  --brand-hover:  #4A5BE0; /* hover/pressed */
  --brand-soft:   #7C8BF7; /* softer brand */
  --brand-tint:   #EEF0FE; /* tinted surfaces */
  --brand-tint-2: #DDE2FD; /* borders on tint */
  --accent:       #6366F1; /* indigo accent */

  /* Neutrals — cool slate */
  --bg:        #F4F5F7; /* page background */
  --bg-2:      #EDEEF1; /* subtle fills / hover */
  --bg-3:      #F9FAFB; /* zebra / inset rows */
  --surface:   #FFFFFF; /* cards */
  --border:    #E5E7EB; /* default borders */
  --border-2:  #D1D5DB; /* stronger borders */

  --text:    #111827; /* headings / primary */
  --text-2:  #374151; /* body */
  --text-3:  #6B7280; /* muted / secondary */
  --text-4:  #9CA3AF; /* placeholder / muted icons */
  --on-brand:#FFFFFF; /* text on brand */

  /* Status — solid + tint + border (present/late/absent/leave) */
  --success:#16A34A; --success-tint:#ECFDF3; --success-border:#BBF7D0; /* Present  */
  --danger: #DC2626; --danger-tint: #FEF2F2; --danger-border: #FECACA; /* Absent   */
  --warning:#D97706; --warning-tint:#FFFBEB; --warning-border:#FDE68A; /* Late     */
  --info:   #2563EB; --info-tint:   #EFF4FF; --info-border:   #BFDBFE; /* Leave    */
  --brand-tint-border: #C7CEFB;

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace;

  --fs-2xs: 0.625rem;   /* 10 — micro labels */
  --fs-xs:  0.6875rem;  /* 11 — meta / pills */
  --fs-sm:  0.75rem;    /* 12 */
  --fs-base:0.8125rem;  /* 13 — dense body default */
  --fs-md:  0.875rem;   /* 14 */
  --fs-lg:  1rem;       /* 16 */
  --fs-xl:  1.125rem;   /* 18 */
  --fs-2xl: 1.375rem;   /* 22 — KPI values */
  --fs-3xl: 1.75rem;    /* 28 */
  --fs-4xl: 2rem;       /* 32 */

  --fw-light:   300;
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semibold:600; /* headings/emphasis only — body stays 400–500 */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.5;
  --tracking-tight: -0.011em;
  --tracking-label: 0.06em;  /* uppercase eyebrows */

  /* Spacing (4px base) */
  --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;

  /* Radius — tight */
  --r-xs: 3px;  /* status pills */
  --r-sm: 6px; --r-md: 8px; --r-lg: 8px; --r-xl: 12px; --r-pill: 9999px;

  /* Shadows — subtle only */
  --sh-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --sh-sm: 0 1px 2px rgba(17, 24, 39, 0.05), 0 1px 1px rgba(17, 24, 39, 0.03);
  --sh-md: 0 2px 8px rgba(17, 24, 39, 0.06);
  --sh-lg: 0 8px 24px rgba(17, 24, 39, 0.08);
  --ring: 0 0 0 3px rgba(91, 110, 245, 0.20); /* indigo focus ring */

  /* Layout */
  --topnav-h: 48px;
  --sidebar-w: 220px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.16s;
}

/* ----- Reset / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--fw-normal);
  color: var(--text-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--brand-hover); }

/* Numbers / currency / times / codes always tabular + mono */
.tnum, .num, .mono, td.num, .stat .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
td, input[type="number"] { font-variant-numeric: tabular-nums; }

/* ----- Typography helpers ------------------------------------------------ */
h1, h2, h3, h4 {
  color: var(--text);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
.text-muted { color: var(--text-3); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.eyebrow, .label-cap {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

/* ----- Buttons ----------------------------------------------------------- */
.btn {
  --btn-h: 34px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--btn-h); padding: 0 var(--sp-4);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: var(--fw-medium);
  letter-spacing: -0.01em; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
  user-select: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled, .btn.is-loading { cursor: not-allowed; opacity: 0.7; }
.btn:active:not(:disabled) { transform: translateY(0.5px); }

.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--sh-xs); }
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); box-shadow: var(--sh-sm); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--sh-xs); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-2); border-color: var(--border-2); }

.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-2); color: var(--text); }

.btn-block { width: 100%; }
.btn-lg { --btn-h: 40px; font-size: var(--fs-md); padding: 0 var(--sp-5); }
.btn-sm { --btn-h: 28px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }

/* Icons inside buttons: pin to a fixed size and never flex-grow/shrink, so the
   lucide SVG (intrinsic 24×24) stays contained within the button. */
.btn svg, .btn [data-lucide] { width: 15px; height: 15px; flex: 0 0 auto; }

/* Button loading: show spinner, hide label */
.btn .btn-spinner { display: none; }
.btn.is-loading .btn-label { visibility: hidden; }
.btn.is-loading .btn-spinner { display: inline-flex; position: absolute; }
.btn.is-loading { position: relative; }

/* ----- Form fields ------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); letter-spacing: -0.01em; }
.input {
  height: 36px; width: 100%;
  padding: 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.input::placeholder { color: var(--text-4); }
.input:hover { border-color: var(--border-2); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.input.has-error { border-color: var(--danger); }
.input.has-error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }

.input-wrap { position: relative; }
.input-wrap .input { padding-right: 38px; }
.input-affix {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-4); border-radius: var(--r-sm); cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.input-affix:hover { color: var(--text-2); background: var(--bg-2); }
.input-affix:focus-visible { outline: none; box-shadow: var(--ring); color: var(--text-2); }

.field-hint { font-size: var(--fs-sm); color: var(--text-3); }
.field-error { font-size: var(--fs-sm); color: var(--danger); }

/* ----- Card -------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-sm);
}

/* ----- Pills / badges (rounded — general use) ---------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 20px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.pill-success { color: var(--success); background: var(--success-tint); border-color: var(--success-border); }
.pill-danger  { color: var(--danger);  background: var(--danger-tint);  border-color: var(--danger-border); }
.pill-warning { color: var(--warning); background: var(--warning-tint); border-color: var(--warning-border); }
.pill-info    { color: var(--info);    background: var(--info-tint);    border-color: var(--info-border); }
.pill-neutral { color: var(--text-3);  background: var(--bg-2);         border-color: var(--border); }

/* ----- Status pill (square 3px — Linear-style, for tables/feeds) --------- */
.spill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 18px; padding: 0 6px; border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1;
  border: 1px solid transparent; white-space: nowrap;
}
.spill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.spill-present { color: #15803D; background: var(--success-tint); border-color: var(--success-border); }
.spill-late    { color: #B45309; background: var(--warning-tint); border-color: var(--warning-border); }
.spill-absent  { color: #B91C1C; background: var(--danger-tint);  border-color: var(--danger-border); }
.spill-leave   { color: #1D4ED8; background: var(--info-tint);    border-color: var(--info-border); }

/* ----- Alerts ------------------------------------------------------------ */
.alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  font-size: var(--fs-sm); border: 1px solid transparent; line-height: var(--lh-snug);
}
.alert svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
.alert-error   { color: #991B1B; background: var(--danger-tint);  border-color: var(--danger-border); }
.alert-success { color: #166534; background: var(--success-tint); border-color: var(--success-border); }
.alert-info    { color: #1E40AF; background: var(--info-tint);    border-color: var(--info-border); }

/* ----- Spinner ----------------------------------------------------------- */
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- Lucide icon sizing default --------------------------------------- */
[data-lucide] { width: 16px; height: 16px; stroke-width: 2; }

/* ----- A11y -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}