/* ============================================================================
   IT Solutions HRMS — Design System  |  tokens · reset · typography · primitives
   "Pulse by IT Solutions". Premium SaaS look. Defined once; dark mode via [data-theme].
   ============================================================================ */
:root {
  /* Brand */
  --aun-coral: #F4604D; --aun-coral-strong: #D94634; --aun-coral-soft: #FFE7E2;
  --aun-teal: #0FB5A6;  --aun-teal-strong: #0B8A7E;  --aun-teal-soft: #DCF6F2;
  --aun-ink: #15202B;   --aun-slate: #5B6B7A;        --aun-line: #E7ECF1;
  --aun-surface: #FFFFFF; --aun-canvas: #F6F8FB;

  /* Semantic */
  --aun-success: #18A957; --aun-warning: #F4A521; --aun-danger: #E5484D; --aun-info: #2E7CF6;
  --aun-success-soft: #E4F7EC; --aun-warning-soft: #FDF1DC; --aun-danger-soft: #FBE9EA; --aun-info-soft: #E6F0FE;

  /* Attendance / field status */
  --aun-ok: #18A957; --aun-warn: #F4A521; --aun-bad: #E5484D; --aun-idle: #9AA7B4;
  --aun-ok-soft: #E4F7EC; --aun-warn-soft: #FDF1DC; --aun-bad-soft: #FBE9EA; --aun-idle-soft: #EEF1F4;

  /* Radius & shadow */
  --aun-radius: 14px; --aun-radius-sm: 10px; --aun-radius-lg: 20px; --aun-radius-pill: 999px;
  --aun-shadow-sm: 0 1px 2px rgba(21,32,43,.06), 0 1px 3px rgba(21,32,43,.08);
  --aun-shadow-md: 0 6px 18px rgba(21,32,43,.10);
  --aun-shadow-lg: 0 18px 48px rgba(21,32,43,.16);

  /* Type */
  --aun-font-head: 'Sora', system-ui, sans-serif;
  --aun-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Spacing scale */
  --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;

  /* Layout */
  --aun-sidebar-w: 264px; --aun-sidebar-collapsed-w: 76px; --aun-topbar-h: 64px;

  /* Motion */
  --aun-ease: cubic-bezier(.4, 0, .2, 1); --aun-dur: 180ms;

  /* Derived text/surface tokens */
  --txt-strong: var(--aun-ink); --txt: #2A3744; --txt-muted: var(--aun-slate);
  --bg: var(--aun-canvas); --bg-surface: var(--aun-surface); --border: var(--aun-line);
  --overlay: rgba(21, 32, 43, .45);
  color-scheme: light;
}

[data-theme="dark"] {
  --aun-ink: #E8EDF2; --aun-slate: #9DABBA; --aun-line: #26323D;
  --aun-surface: #16202A; --aun-canvas: #0E161D;
  --aun-coral-soft: #3A201C; --aun-teal-soft: #0E2B29;
  --aun-success-soft: #13261B; --aun-warning-soft: #2C2412; --aun-danger-soft: #2C1719; --aun-info-soft: #13233D;
  --aun-ok-soft: #13261B; --aun-warn-soft: #2C2412; --aun-bad-soft: #2C1719; --aun-idle-soft: #1B252E;
  --aun-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --aun-shadow-md: 0 6px 18px rgba(0,0,0,.5); --aun-shadow-lg: 0 18px 48px rgba(0,0,0,.6);
  --txt-strong: #E8EDF2; --txt: #C8D2DC; --txt-muted: #9DABBA;
  --bg: var(--aun-canvas); --bg-surface: var(--aun-surface); --border: var(--aun-line);
  --overlay: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--aun-font-body);
  background: var(--bg);
  color: var(--txt);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--aun-font-head);
  color: var(--txt-strong);
  margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
}
h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 16px; }
p { margin: 0 0 var(--sp-3); }

a { color: var(--aun-teal-strong); text-decoration: none; transition: color var(--aun-dur) var(--aun-ease); }
a:hover { color: var(--aun-teal); }

.tabular, .num { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--aun-info); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--aun-coral-soft); color: var(--aun-ink); }

/* Focusing an invalid field (e.g. after a failed validation) scrolls it into view natively — this just
   makes that native scroll animated instead of an instant jump. The reduced-motion block below already
   forces scroll-behavior:auto !important, so this respects that preference for free. */
html { scroll-behavior: smooth; }

* { scrollbar-width: thin; scrollbar-color: var(--aun-line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--aun-line); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }

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

/* ---- layout primitives (used across components) ---- */
.aun-stack { display: flex; flex-direction: column; }
.aun-row { display: flex; align-items: center; }
.aun-wrap { flex-wrap: wrap; }
.aun-spread { display: flex; align-items: center; justify-content: space-between; }
.aun-center { display: flex; align-items: center; justify-content: center; }
.aun-grow { flex: 1 1 auto; min-width: 0; }
.aun-gap-1 { gap: var(--sp-1); } .aun-gap-2 { gap: var(--sp-2); } .aun-gap-3 { gap: var(--sp-3); }
.aun-gap-4 { gap: var(--sp-4); } .aun-gap-5 { gap: var(--sp-5); } .aun-gap-6 { gap: var(--sp-6); }
.aun-grid { display: grid; gap: var(--sp-5); }
.aun-muted { color: var(--txt-muted); }
.aun-strong { color: var(--txt-strong); font-weight: 600; }
.aun-small { font-size: 12px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.w-full { width: 100%; }

@keyframes aun-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes aun-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes aun-pulse { 0% { box-shadow: 0 0 0 0 rgba(15,181,166,.5); } 70% { box-shadow: 0 0 0 12px rgba(15,181,166,0); } 100% { box-shadow: 0 0 0 0 rgba(15,181,166,0); } }
@keyframes aun-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes aun-spin { to { transform: rotate(360deg); } }
.aun-animate-in { animation: aun-fade-up var(--aun-dur) var(--aun-ease) both; }