Colors

/* Semantic colors as Tailwind utilities */
<Button color="primary">Primary Action</Button>
<Badge color="success">Active</Badge>
<Alert color="danger">Error occurred</Alert>

/* Background + content pairs (auto-contrast) */
<div className="bg-primary text-primary-content">
  White text on primary background
</div>

/* Text colors for inline use */
<Text className="text-base-content">Default text</Text>
<Text className="text-base-content/70">Secondary text (70% opacity)</Text>
<Text className="text-base-content/70">Muted text (40% opacity)</Text>

/* Base surface scale */
<div className="bg-base-50">Page background</div>
<div className="bg-base-100">Card background</div>
<div className="bg-base-200">Subtle background</div>
<div className="border border-base-300">Border</div>

/* In your main CSS file — override after the theme import */
@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";

/* Override primary to your brand color */
[data-theme="default"] {
  --color-primary: oklch(0.52 0.28 220);         /* brand blue */
  --color-primary-content: oklch(0.98 0.005 220); /* white text on primary */

  /* Override secondary */
  --color-secondary: oklch(0.48 0.22 160);        /* brand teal */
  --color-secondary-content: oklch(0.98 0.005 160);

  /* Override base surfaces for a warmer feel */
  --color-base-50:  oklch(0.985 0.005 80);
  --color-base-100: oklch(0.970 0.008 80);
  --color-base-200: oklch(0.940 0.010 80);
}

/* Dark mode overrides — both selector forms required */
.dark [data-theme="default"],
[data-theme="default"].dark {
  --color-primary: oklch(0.72 0.22 220);
  --color-primary-content: oklch(0.12 0.02 220);
}