/* globals.css */
@import 'tailwindcss';

/* Tailwind base, components, utilities */
@tailwind base;
@tailwind components;
@tailwind utilities;

@theme {
  /* Brand */
  --color-primary: oklch(51.1% 0.262 276.966);
  --color-primary-hover: oklch(47% 0.262 276.966);

  /* Soft / UI surfaces */
  --color-primary-soft: oklch(51.1% 0.262 276.966 / 0.1);
  --color-primary-muted: oklch(51.1% 0.262 276.966 / 0.6);

  /* Focus ring */
  --color-primary-ring: oklch(51.1% 0.262 276.966 / 0.4);
}

/* Optional body defaults */
body {
  background-color: white;
  font-family: ui-sans-serif, system-ui, sans-serif;
  color: #1f2937; /* Tailwind gray-900 default */
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Optional focus outline for accessibility */
:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  ring-offset-width: 2px;
}

/* You can define custom colors directly in tailwind.config.js instead of here */