/* Custom Tailwind Purple 500 theme for Flüchtlingshilfe Xanten */
/* Light, friendly, and welcoming color scheme */

:root {
  /* --- Tailwind Purple palette (primary) --- */
  --gold-50:  #faf5ff !important;
  --gold-100: #f3e8ff !important;
  --gold-200: #e9d5ff !important;
  --gold-300: #d8b4fe !important;
  --gold-400: #c084fc !important;
  --gold-500: #a855f7 !important;  /* Tailwind Purple 500 */
  --gold-600: #9333ea !important;
  --gold-700: #7e22ce !important;
  --gold-800: #6b21a8 !important;
  --gold-900: #581c87 !important;

  /* --- Accent (soft violet to complement purple) --- */
  --indigo-500: #8b5cf6 !important;  /* Tailwind Violet 500 */
  --indigo-400: #a78bfa !important;
  --indigo-300: #c4b5fd !important;

  /* Semantic aliases */
  --color-primary:        var(--gold-500) !important;
  --color-primary-hover:  var(--gold-600) !important;
  --color-primary-active: var(--gold-700) !important;
  --color-accent:         var(--indigo-500) !important;
  --color-accent-hover:   color-mix(in srgb, var(--indigo-500) 85%, #000) !important;

  --color-primary-subtle: var(--gold-50) !important;
  --color-accent-subtle:  #f5f3ff !important;

  /* Text - warm and readable */
  --text-link:     var(--gold-600) !important;
  --text-link-hover: var(--gold-500) !important;

  /* Surfaces - light and airy */
  --surface-wash:      #faf5ff !important;
  --surface-wash-soft: #ffffff !important;

  /* Focus ring - purple tint */
  --focus-ring: color-mix(in srgb, var(--gold-500) 45%, transparent) !important;
}

/* Dark theme adjustments for purple palette */
html.dark {
  --gold-50:  #1e1b2e !important;
  --gold-100: #2d2640 !important;
  --gold-200: #4c1d95 !important;
  --gold-300: #6b21a8 !important;
  --gold-400: #7e22ce !important;
  --gold-500: #9333ea !important;
  --gold-600: #a855f7 !important;
  --gold-700: #c084fc !important;
  --gold-800: #d8b4fe !important;
  --gold-900: #e9d5ff !important;

  --indigo-500: #8b5cf6 !important;
  --indigo-400: #a78bfa !important;
  --indigo-300: #c4b5fd !important;

  --color-primary:        var(--gold-600) !important;
  --color-primary-hover:  var(--gold-700) !important;
  --color-primary-active: var(--gold-800) !important;
  --color-accent:         var(--indigo-400) !important;
  --color-accent-hover:   color-mix(in srgb, var(--indigo-400) 85%, #fff) !important;

  --color-primary-subtle: var(--gold-900) !important;
  --color-accent-subtle:  #3b0764 !important;

  --text-link:     var(--gold-600) !important;
  --text-link-hover: var(--gold-500) !important;

  --surface-wash:      var(--gold-100) !important;
  --surface-wash-soft: var(--gold-50) !important;
}