/* ---------------------------------------------------------
   base.css — reset, design tokens, typography
--------------------------------------------------------- */

:root {
  /* color tokens */
  --color-bg: #f6f7fb;
  --color-surface: #ffffff;
  --color-border: #e4e7ec;
  --color-border-strong: #d0d5dd;

  --color-text: #101828;
  --color-text-muted: #667085;
  --color-text-faint: #98a2b3;

  --color-sidebar-bg: #111827;
  --color-sidebar-bg-hover: #1f2937;
  --color-sidebar-text: #9ca3af;
  --color-sidebar-text-active: #ffffff;
  --color-sidebar-border: #1f2937;

  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-soft: #eff4ff;

  --color-success: #067647;
  --color-success-bg: #ecfdf3;
  --color-success-border: #abefc6;

  --color-warning: #b54708;
  --color-warning-bg: #fffaeb;
  --color-warning-border: #fedf89;

  --color-danger: #b42318;
  --color-danger-bg: #fef3f2;
  --color-danger-border: #fecdca;

  --color-neutral: #364152;
  --color-neutral-bg: #f2f4f7;
  --color-neutral-border: #d0d5dd;

  --color-info: #175cd3;
  --color-info-bg: #eff8ff;
  --color-info-border: #b2ddff;

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

  /* radius / shadow */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.16);

  /* layout */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --topbar-height: 60px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 17px;
  font-weight: 600;
}

h3 {
  font-size: 14px;
  font-weight: 600;
}

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

button {
  font-family: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--color-accent-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}