@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 43 72% 47%;
  --primary-foreground: 0 0% 100%;
  --secondary: 120 25% 25%;
  --secondary-foreground: 0 0% 100%;
  --muted: 40 20% 96%;
  --muted-foreground: 0 0% 40%;
  --accent: 43 72% 47%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 40 20% 88%;
  --input: 40 20% 88%;
  --ring: 43 72% 47%;
  --radius: 0.5rem;
  --success: 142 76% 36%;
}

.dark {
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 43 72% 47%;
  --primary-foreground: 0 0% 100%;
  --secondary: 120 25% 25%;
  --secondary-foreground: 0 0% 100%;
  --muted: 40 20% 96%;
  --muted-foreground: 0 0% 40%;
  --accent: 43 72% 47%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 62.8% 45%;
  --destructive-foreground: 210 40% 98%;
  --border: 40 20% 88%;
  --input: 40 20% 88%;
  --ring: 43 72% 47%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Safe area support for iOS notch */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Safe area utilities for mobile */
.safe-top {
  padding-top: env(safe-area-inset-top);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-inset {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body {
  background: #ffffff;
  color: #1a1a1a;
}

[data-hydration-error] {
  display: none !important;
}

.dial-button {
  @apply w-16 h-16 rounded-full flex items-center justify-center text-xl font-semibold transition-all duration-200;
  @apply bg-gray-100 hover:bg-gray-200 active:bg-gray-300 text-gray-800;
  @apply shadow-md hover:shadow-lg border border-gray-200;
}

.dial-button:active {
  transform: scale(0.95);
}

.call-button {
  @apply w-16 h-16 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg;
}

.call-button-green {
  @apply bg-amber-600 hover:bg-amber-500 text-white;
}

.call-button-red {
  @apply bg-red-600 hover:bg-red-500 text-white;
}

.control-button {
  @apply w-14 h-14 rounded-full flex items-center justify-center transition-all duration-200;
  @apply bg-gray-100 hover:bg-gray-200 text-gray-700 shadow-md border border-gray-200;
}

.control-button.active {
  @apply bg-amber-600 hover:bg-amber-500 text-white;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* QTvoice branded styles */
.qtvoice-gold {
  color: #c9a227;
}

.qtvoice-gold-bg {
  background-color: #c9a227;
}

.qtvoice-green {
  color: #2d4a2d;
}

.qtvoice-green-bg {
  background-color: #2d4a2d;
}