Configuration

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --color-primary-50: oklch(0.98 0.02 15); /* #fef2f2 */
  --color-primary-100: oklch(0.94 0.05 15); /* #fee2e2 */
  --color-primary-200: oklch(0.87 0.09 15); /* #fecaca */
  --color-primary-300: oklch(0.76 0.15 15); /* #fca5a5 */
  --color-primary-400: oklch(0.64 0.22 15); /* #f87171 */
  --color-primary-500: oklch(0.55 0.28 15); /* #ef4444 */
  --color-primary-600: oklch(0.42 0.30 15); /* #bd0906 */
  --color-primary-700: oklch(0.35 0.25 15); /* #991b1b */
  --color-primary-800: oklch(0.28 0.20 15); /* #7f1d1d */
  --color-primary-900: oklch(0.23 0.15 15); /* #651515 */
  --color-primary-950: oklch(0.15 0.10 15); /* #450a0a */

  --color-secondary-50: oklch(0.98 0.00 0); /* #fafafa */
  --color-secondary-100: oklch(0.94 0.00 0); /* #f0f0f0 */
  --color-secondary-200: oklch(0.86 0.00 0); /* #e0e0e0 */
  --color-secondary-300: oklch(0.78 0.00 0); /* #c8c8c8 */
  --color-secondary-400: oklch(0.68 0.00 0); /* #a8a8a8 */
  --color-secondary-500: oklch(0.59 0.00 0); /* #989898 */
  --color-secondary-600: oklch(0.49 0.00 0); /* #808080 */
  --color-secondary-700: oklch(0.40 0.00 0); /* #676767 */
  --color-secondary-800: oklch(0.29 0.00 0); /* #484848 */
  --color-secondary-900: oklch(0.22 0.00 0); /* #373737 */
  --color-secondary-950: oklch(0.09 0.00 0); /* #090909 */

  --animate-toast-from-right: toast-from-right 0.5s
    cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --animate-toast-from-left: toast-from-left 0.5s
    cubic-bezier(0.68, -0.55, 0.27, 1.55);

  @keyframes toast-from-right {
    0% {
      transform: translateX(50%);
      opacity: 0%;
    }

    100% {
      transform: translateX(0);
      opacity: 100%;
    }
  }

  @keyframes toast-from-left {
    0% {
      transform: translateX(-50%);
      opacity: 0%;
    }

    100% {
      transform: translateX(0);
      opacity: 100%;
    }
  }
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@plugin "@tailwindcss/typography";

/* Keep: Include Rails UI content paths */
@config "../../stylesheets/railsui/tailwind.config.js";