:root {
  --color-primary: #1a73a8;
  --color-primary-hover: #145a85;
  --color-accent-orange: #f39200;
  --color-muted-bluegray: #7a96a2;

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-400: #94a3b8;
  --slate-600: #475569;
  --slate-800: #1e293b;

  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-500: #f59e0b;
  --amber-700: #b45309;

  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-600: #059669;
  --emerald-700: #047857;

  --purple-100: #f3e8ff;
  --purple-700: #7e22ce;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Inter, Arial, sans-serif;

  /* Every component (cards, tables, badges, topbar) is designed for a light background only —
     force light mode so browsers/OSes in dark mode don't auto-darken some elements (form
     controls, scrollbars) while the rest of the page stays light, which is what caused low-contrast
     dark-on-dark text. A real dark theme is out of scope for this phase. */
  color-scheme: light only;
}

* {
  box-sizing: border-box;
}

/* The [hidden] attribute has the same CSS specificity as a single class selector, so any
   `.some-class { display: ... }` declared later in the cascade silently overrides it — an
   element can carry `hidden` and still render. This one rule makes `hidden` win everywhere,
   as it's meant to. */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--slate-800);
  background: var(--slate-50);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: var(--slate-800);
}

.brand-text-strong {
  font-weight: 700;
  color: var(--color-primary);
}

.brand-text-muted {
  font-weight: 500;
  color: var(--color-muted-bluegray);
}