/* AttSync design system — global tokens, keyframes and base resets.
   Tokens are ported verbatim from the Claude design prototype (Attendance Sync.dc.html).
   These :root blocks and @keyframes MUST live in a GLOBAL stylesheet — scoped .razor.css
   would name-mangle the keyframes and fail to expose the variables app-wide. */

:root,
[data-theme="light"] {
  --bg: #f5f6f9;
  --surface: #ffffff;
  --surface-2: #f2f4f8;
  --surface-3: #e8ebf1;
  --border: #e7e9f0;
  --border-2: #d4d9e3;
  --text: #12151c;
  --text-2: #525a68;
  --text-3: #8a91a0;
  --accent: #5145e8;
  --accent-2: #4035c9;
  --accent-3: #6f5cf0;
  --accent-soft: #ecebfd;
  --accent-on: #ffffff;
  --sidebar: #fbfcfe;
  --sidebar-border: #eaecf2;
  --topbar: #ffffff;
  --success: #0e9f6e;
  --success-soft: #e7f7f0;
  --success-text: #0a7d56;
  --warning: #d97706;
  --warning-soft: #fcf2e3;
  --warning-text: #a85d04;
  --danger: #dc2626;
  --danger-soft: #fdebea;
  --danger-text: #b91c1c;
  --info: #2563eb;
  --info-soft: #e8efff;
  --info-text: #1d4ed8;
  --shadow: 0 1px 2px rgba(16, 20, 30, 0.04), 0 1px 3px rgba(16, 20, 30, 0.05);
  --shadow-lg: 0 24px 60px -16px rgba(16, 20, 30, 0.24);
  --overlay: rgba(18, 21, 28, 0.40);
}

[data-theme="dark"] {
  --bg: #090b10;
  --surface: #13161e;
  --surface-2: #1a1e28;
  --surface-3: #232834;
  --border: #242a35;
  --border-2: #333a48;
  --text: #eef1f6;
  --text-2: #a6aebd;
  --text-3: #6c7484;
  --accent: #7d7bff;
  --accent-2: #9b99ff;
  --accent-3: #5d5bd6;
  --accent-soft: rgba(125, 123, 255, 0.15);
  --accent-on: #ffffff;
  --sidebar: #0c0e14;
  --sidebar-border: #1c212b;
  --topbar: #0f121a;
  --success: #2dd4a4;
  --success-soft: rgba(45, 212, 164, 0.14);
  --success-text: #3ce0b2;
  --warning: #f0a83a;
  --warning-soft: rgba(240, 168, 58, 0.15);
  --warning-text: #f6bb5d;
  --danger: #f1675c;
  --danger-soft: rgba(241, 103, 92, 0.16);
  --danger-text: #ff8479;
  --info: #5d8cff;
  --info-soft: rgba(93, 140, 255, 0.16);
  --info-text: #86a8ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 28px 64px -16px rgba(0, 0, 0, 0.7);
  --overlay: rgba(2, 4, 8, 0.62);
}

/* ---- base reset (ported from prototype helmet) ---- */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
}

* {
  box-sizing: border-box;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; }

input::placeholder, textarea::placeholder { color: var(--text-3); }
input, textarea, select { font: inherit; }

button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}

a { color: inherit; text-decoration: none; }

code, .mono {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, p { margin: 0; }

/* ---- keyframes (global, referenced by scoped component CSS) ---- */
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.82); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes drawerIn {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}