@theme {
  --color-primary-50: oklch(0.9705 0.0142 254.6); /* #eff6ff */
  --color-primary-100: oklch(0.9319 0.0316 255.59); /* #dbeafe */
  --color-primary-200: oklch(0.8823 0.0571 254.13); /* #bfdbfe */
  --color-primary-300: oklch(0.8091 0.0956 251.81); /* #93c5fd */
  --color-primary-400: oklch(0.7137 0.1434 254.62); /* #60a5fa */
  --color-primary-500: oklch(0.6231 0.188 259.81); /* #3b82f6 */
  --color-primary-600: oklch(0.5461 0.2152 262.88); /* #2563eb */
  --color-primary-700: oklch(0.4882 0.2172 264.38); /* #1d4ed8 */
  --color-primary-800: oklch(0.4244 0.1809 265.64); /* #1e40af */
  --color-primary-900: oklch(0.3791 0.1378 265.52); /* #1e3a8a */
  --color-primary-950: oklch(0.2823 0.0874 267.94); /* #172554 */

  --color-secondary-50: oklch(0.9303 0.0116 264.51); /* #e4e8f0 */
  --color-secondary-100: oklch(0.7919 0.0331 260.02); /* #afbcd1 */
  --color-secondary-200: oklch(0.6529 0.0546 260.37); /* #7d91b2 */
  --color-secondary-300: oklch(0.5146 0.0758 259.46); /* #4d6893 */
  --color-secondary-400: oklch(0.4458 0.0871 259.44); /* #365484 */
  --color-secondary-500: oklch(0.3069 0.1089 259.22); /* #062c65 */
  --color-secondary-600: oklch(0.2766 0.0982 259.03); /* #042557 */
  --color-secondary-700: oklch(0.2458 0.087 259.1); /* #031e49 */
  --color-secondary-800: oklch(0.2148 0.0771 259.4); /* #02173c */
  --color-secondary-900: oklch(0.1852 0.0654 258.58); /* #01112f */
  --color-secondary-950: oklch(0.1212 0.0458 258.46); /* #000517 */

  --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-300, currentColor);
  }
}

@plugin "@tailwindcss/typography";

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