:root {
  color-scheme: light;
  --brand-primary: #2563eb;
  --brand-primary-dark: #1d4ed8;
  --brand-primary-soft: #60a5fa;
  --brand-secondary: #0ea5e9;
  --brand-surface: #f4f7fb;
  --brand-surface-alt: #eef2ff;
  --brand-card: #ffffff;
  --brand-border: rgba(15, 23, 42, 0.08);
  --brand-border-strong: rgba(15, 23, 42, 0.14);
  --brand-heading: #0f172a;
  --brand-muted: #64748b;
  --brand-shadow-soft: 0 20px 45px rgba(15, 23, 42, 0.12);
  --brand-shadow-card: 0 14px 32px rgba(148, 163, 184, 0.25);
  --brand-radius-xl: 20px;
}

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

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.08) 0%, rgba(37, 99, 235, 0.06) 20%, rgba(244, 247, 251, 1) 60%);
  color: var(--brand-heading);
  -webkit-font-smoothing: antialiased;
}

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

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.drawer-gradient {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  color: #ffffff;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.35);
}

.card-elevated {
  border-radius: var(--brand-radius-xl);
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  box-shadow: var(--brand-shadow-card);
}

.card-soft {
  border-radius: var(--brand-radius-xl);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: var(--brand-shadow-soft);
}

.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.brand-chip--primary {
  background: rgba(37, 99, 235, 0.12);
  color: var(--brand-primary);
  border: 1px solid rgba(37, 99, 235, 0.18);
}

.brand-chip--secondary {
  background: rgba(14, 165, 233, 0.12);
  color: var(--brand-secondary);
  border: 1px solid rgba(14, 165, 233, 0.2);
}

.brand-chip--success {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.brand-chip--rose {
  background: rgba(244, 63, 94, 0.12);
  color: #e11d48;
  border: 1px solid rgba(244, 63, 94, 0.2);
}

.brand-progress-track {
  position: relative;
  height: 0.45rem;
  width: 100%;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.brand-progress-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-soft) 100%);
  transition: width 220ms ease;
}

.brand-progress-fill--emerald {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.brand-progress-fill--indigo {
  background: linear-gradient(90deg, #4338ca 0%, #6366f1 100%);
}

.brand-progress-fill--sky {
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
}

.brand-progress-fill--amber {
  background: linear-gradient(90deg, #f97316 0%, #facc15 100%);
}