/* ============================================================
   AttendX — Design Tokens & Base Styles
   ============================================================ */

:root {
  --accent:       #4f8ef7;
  --accent-dim:   #deeafd;
  --danger:       #e05c5c;
  --success:      #3ecf8e;
  --warning:      #f5a623;
  --radius:       12px;
  --radius-lg:    20px;
  --sidebar-w:    240px;
}

/* Dark mode (default) */
[data-theme="dark"] {
  --bg:           #0a0f1e;
  --surface:      #111827;
  --surface2:     #1a2236;
  --border:       rgba(255,255,255,0.07);
  --border-hover: rgba(255,255,255,0.14);
  --text:         #f0f4ff;
  --muted:        #6b7a99;
  --accent-dim:   #1e3a6e;
  --input-bg:     #111827;
  --card-bg:      #111827;
  --sidebar-bg:   #0d1424;
  --hover-bg:     #1a2236;
}

/* Light mode */
[data-theme="light"] {
  --bg:           #f4f6fb;
  --surface:      #ffffff;
  --surface2:     #f0f3fa;
  --border:       rgba(0,0,0,0.08);
  --border-hover: rgba(0,0,0,0.15);
  --text:         #0f172a;
  --muted:        #64748b;
  --accent-dim:   #deeafd;
  --input-bg:     #f8faff;
  --card-bg:      #ffffff;
  --sidebar-bg:   #ffffff;
  --hover-bg:     #f0f3fa;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s, color 0.2s;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: 'DM Serif Display', serif; letter-spacing: -0.3px; }