/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Neutrals */
  --c-bg:          #ffffff;
  --c-bg-secondary:#f5f5f5;
  --c-bg-tertiary: #ebebeb;
  --c-border:      #d0d0d0;
  --c-border-light:#e8e8e8;
  --c-text:        #1a1a1a;
  --c-text-muted:  #666666;
  --c-text-faint:  #999999;

  /* Sunset accents */
  --c-accent:      #FF6B35;
  --c-accent-2:    #F97316;
  --c-accent-3:    #FB923C;
  --c-accent-light:#FDBA74;
  --c-accent-gold: #F59E0B;

  /* Semantic */
  --c-success:     #2d7a2d;
  --c-success-bg:  #edf7ed;
  --c-danger:      #c0392b;
  --c-danger-bg:   #fdf2f2;
  --c-warn:        #a16207;
  --c-warn-bg:     #fefce8;
  --c-info:        #1d4ed8;
  --c-info-bg:     #eff6ff;

  /* Layout */
  --sidebar-w:     200px;
  --header-h:      38px;
  --content-pad:   16px;

  /* Typography */
  --font:          system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'Cascadia Code', 'Menlo', 'Consolas', monospace;
  --font-size:     13px;
  --line-height:   1.45;

  /* Borders / radius */
  --radius:        3px;
  --border:        1px solid var(--c-border);
}

html {
  font-family:  var(--font);
  font-size:    var(--font-size);
  line-height:  var(--line-height);
  color:        var(--c-text);
  background:   var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

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

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
}
h1 { font-size: 18px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }

p { color: var(--c-text-muted); }

code, pre {
  font-family: var(--font-mono);
  font-size:   12px;
}
pre {
  background:    var(--c-bg-secondary);
  border:        var(--border);
  border-radius: var(--radius);
  padding:       10px 12px;
  overflow-x:    auto;
  white-space:   pre-wrap;
  word-break:    break-word;
}

hr {
  border:        none;
  border-top:    var(--border);
  margin:        12px 0;
}

/* ── Utility classes ──────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.text-muted  { color: var(--c-text-muted); }
.text-faint  { color: var(--c-text-faint); }
.text-danger { color: var(--c-danger); }
.text-success{ color: var(--c-success); }
.text-accent { color: var(--c-accent); }
.text-mono   { font-family: var(--font-mono); }
.text-sm     { font-size: 11px; }
.text-right  { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 20px; }

.hidden { display: none !important; }

/* ── Dark mode ───────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --c-bg:          #111111;
  --c-bg-secondary:#1a1a1a;
  --c-bg-tertiary: #222222;
  --c-border:      #2e2e2e;
  --c-border-light:#252525;
  --c-text:        #e8e8e8;
  --c-text-muted:  #999999;
  --c-text-faint:  #666666;

  --c-success:     #4ade80;
  --c-success-bg:  #052e16;
  --c-danger:      #f87171;
  --c-danger-bg:   #2d0a0a;
  --c-warn:        #fbbf24;
  --c-warn-bg:     #1c1507;
  --c-info:        #60a5fa;
  --c-info-bg:     #0c1629;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--c-bg-secondary);
  color:      var(--c-text);
}

[data-theme="dark"] .shell__header { background: #0a0a0a; border-bottom-color: #000; }
[data-theme="dark"] .auth-box__header { background: #0a0a0a; }
[data-theme="dark"] table.data-table tbody tr:hover td { background: var(--c-bg-tertiary); }

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 7px; height: 7px; }
::-webkit-scrollbar-track    { background: var(--c-bg-secondary); }
::-webkit-scrollbar-thumb    { background: var(--c-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b0b0b0; }