/**
 * Design Tokens Override
 *
 * Überschreibt Farben in styles.css mit den korrekten Werten aus design-tokens.json
 *
 * Single Source of Truth: design-tokens.json
 * Version: 1.1.0
 * Last Updated: 2026-01-19
 */

:root {
  /* Claude Brand Terracotta (Primary) */
  --color-coral-500: rgb(198, 97, 63);
  --color-coral-500-hex: #C6613F;
  --color-coral-600: rgb(178, 77, 43);
  --color-coral-600-hex: #B24D2B;

  /* Claude Style Footer & Typography */
  --color-black: rgb(0, 0, 0);
  --color-gray-900: rgb(17, 24, 39);
  --color-gray-400: rgb(156, 163, 175);
}

/* Background Colors */
.bg-coral-500 {
  background-color: var(--color-coral-500) !important;
}

.bg-coral-600 {
  background-color: var(--color-coral-600) !important;
}

/* Text Colors */
.text-coral-500 {
  color: var(--color-coral-500) !important;
}

.text-coral-600 {
  color: var(--color-coral-600) !important;
}

/* Hover States */
.hover\:bg-coral-600:hover {
  background-color: var(--color-coral-600) !important;
}

.hover\:text-coral-600:hover {
  color: var(--color-coral-600) !important;
}

/* Gradient Classes */
.from-coral-500 {
  --tw-gradient-from: var(--color-coral-500) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(198, 97, 63, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-coral-600 {
  --tw-gradient-to: var(--color-coral-600) var(--tw-gradient-to-position) !important;
}

/* Shadow with coral-500 color */
.shadow-coral-500\/25 {
  --tw-shadow-color: rgba(198, 97, 63, 0.25) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

/* Custom gradient-text class (used in hero) */
.gradient-text {
  background: linear-gradient(135deg, var(--color-coral-500), var(--color-coral-600)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Footer & Typography Overrides (Claude Style) */
.bg-black {
  background-color: var(--color-black) !important;
}

.text-gray-900 {
  color: var(--color-gray-900) !important;
}

.text-gray-400 {
  color: var(--color-gray-400) !important;
}

/* Shadow Overrides for Icon Containers */
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}