/* ================================================================
   SurveyApp Admin · Design System — Tokens & Global Reset
   ================================================================ */

/* Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Brand */
  --c-primary:         #6366F1;
  --c-primary-dark:    #4F46E5;
  --c-primary-light:   rgba(99, 102, 241, 0.10);
  --c-primary-ring:    rgba(99, 102, 241, 0.25);

  /* Semantic */
  --c-success:         #10B981;
  --c-success-bg:      rgba(16, 185, 129, 0.10);
  --c-warning:         #F59E0B;
  --c-warning-bg:      rgba(245, 158, 11, 0.10);
  --c-danger:          #EF4444;
  --c-danger-bg:       rgba(239, 68, 68, 0.10);
  --c-info:            #3B82F6;
  --c-info-bg:         rgba(59, 130, 246, 0.10);

  /* Surfaces */
  --c-bg:              #F4F6FB;
  --c-surface:         #FFFFFF;

  /* Text */
  --c-text:            #111827;
  --c-text-2:          #4B5563;
  --c-text-3:          #9CA3AF;

  /* Borders */
  --c-border:          #E5E7EB;
  --c-border-2:        #D1D5DB;

  /* Sidebar (dark) */
  --sb-bg:             #0F172A;
  --sb-text:           #CBD5E1;
  --sb-text-muted:     #64748B;
  --sb-active-bg:      rgba(99, 102, 241, 0.15);
  --sb-active-text:    #A5B4FC;
  --sb-hover-bg:       rgba(255, 255, 255, 0.06);
  --sb-border:         rgba(255, 255, 255, 0.08);
  --sb-width:          260px;

  /* Topbar */
  --topbar-h:          60px;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0,0,0,0.05);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --sh-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --sh-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04);

  /* Motion */
  --t-fast: 150ms ease;
  --t-base: 200ms ease;
}

/* ── Global Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img, svg { display: block; }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: 1.25;
  font-weight: 600;
  color: var(--c-text);
}

p { margin: 0; }

/* ── Validation (Blazor EditForm) ───────────────────────────── */
.validation-message {
  font-size: 0.75rem;
  color: var(--c-danger);
  margin-top: 4px;
}