/* 使用 Tailwind CSS v4 的 Theme variable namespaces 功能，可以讓 Tailwind 自動產生對應的 utility class */
/* @see: https://tailwindcss.com/docs/theme#theme-variable-namespaces */
@theme {
  --color-primary-200: #f4e074;
  --color-primary-300: #dcb940;
  --color-primary-400: #9e4bec;
  --color-primary-500: #fbf6bf;
  --color-primary-600: #8914f7;
  --color-primary-700: #450a7d;

  --color-secondary-400: #dcb940;
  --color-secondary-500: #dcb940;

  --color-danger-400: #ff3b3b;
  --color-danger-500: #ff3b3b;
  --color-danger-600: #ff3b3b;

  --color-success: #00cc66;
  --color-warning: #dcb940;

  --color-gray: #837589;
  --color-background: #1c0431;
  --color-border: #fbf6bf;
  --color-text: #ffffff;
  --color-white: #ffffff;

  --color-navigation: #39005f;
  --color-input: #fbf6bf;
}

@layer theme {
  .dark-theme {
    --color-primary-200: #f4e074;
    --color-primary-300: #dcb940;
    --color-primary-400: #9e4bec;
    --color-primary-500: #fbf6bf;
    --color-primary-600: #8914f7;
    --color-primary-700: #450a7d;

    --color-secondary-400: #dcb940;
    --color-secondary-500: #dcb940;

    --color-danger-400: #ff3b3b;
    --color-danger-500: #ff3b3b;
    --color-danger-600: #ff3b3b;

    --color-success: #00cc66;
    --color-warning: #dcb940;

    --color-input: #450a7d;
    --color-navigation: #290344;
    --color-white: #ffffff;
    --color-text: #ffffff;
    --color-border: #450a7d;
    --color-background: #1d0333;
    --color-gray: #837589;
  }
}