/* Workforce / OPERA — Design System */

:root {
  --wf-bg: #eef6ff;
  --wf-bg-gradient: linear-gradient(135deg, #e8f5ff 0%, #f4efff 100%);
  --wf-surface: #ffffff;
  --wf-surface-soft: #f8fafc;
  --wf-sidebar: #fbfdff;
  --wf-border: #e6edf5;
  --wf-border-soft: #f0f4f8;

  --wf-text: #172033;
  --wf-text-muted: #667085;
  --wf-text-soft: #98a2b3;

  --wf-primary: #2f80ed;
  --wf-primary-hover: #1f6fd6;
  --wf-primary-soft: #eaf3ff;

  --wf-success: #22c55e;
  --wf-success-soft: #dcfce7;
  --wf-warning: #f59e0b;
  --wf-warning-soft: #fff7d6;
  --wf-danger: #ef4444;
  --wf-danger-soft: #fee2e2;
  --wf-info: #38bdf8;
  --wf-info-soft: #e0f2fe;
  --wf-purple: #8b5cf6;
  --wf-purple-soft: #f1eaff;

  --wf-radius-xs: 6px;
  --wf-radius-sm: 10px;
  --wf-radius-md: 14px;
  --wf-radius-lg: 20px;
  --wf-radius-xl: 28px;

  --wf-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --wf-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --wf-shadow-lg: 0 20px 60px rgba(16, 24, 40, 0.10);

  --wf-sidebar-width: 250px;
  --wf-topbar-height: 64px;

  --wf-font-xs: 12px;
  --wf-font-sm: 13px;
  --wf-font-md: 14px;
  --wf-font-lg: 16px;
  --wf-font-xl: 20px;
  --wf-font-2xl: 26px;

  --wf-transition: 180ms ease;
}

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

.wf-body {
  min-height: 100vh;
  margin: 0;
  background: var(--wf-bg-gradient);
  color: var(--wf-text);
  font-family: Inter, Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--wf-font-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

:focus-visible {
  outline: 2px solid var(--wf-primary);
  outline-offset: 2px;
  border-radius: var(--wf-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}