frontend/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body, #root { height: 100%; }
  html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    background-color: #F9FAFB;
    color: #111827;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
  }
  /* Make all native focus rings consistent with the design system */
  *:focus { outline: none; }
  ::selection { background: rgba(79, 70, 229, 0.18); color: #111827; }

  /* Number inputs without spinner clutter */
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  input[type='number'] { -moz-appearance: textfield; }
}

@layer components {
  .focus-ring {
    @apply focus-visible:ring-2 focus-visible:ring-brand/30 focus-visible:border-brand;
  }
}