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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 33% 14%;
    --card: 0 0% 100%;
    --card-foreground: 240 33% 14%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 33% 14%;
    --primary: 20 90% 54%;
    --primary-foreground: 0 0% 100%;
    --secondary: 357 76% 48%;
    --secondary-foreground: 0 0% 100%;
    --muted: 210 40% 96%;
    --muted-foreground: 220 9% 46%;
    --accent: 44 100% 59%;
    --accent-foreground: 240 33% 14%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 20 90% 54%;
    --radius: 0.75rem;
    --brand-primary: #F26522;
    --brand-secondary: #D2232A;
    --brand-accent: #FFC72C;
    --success: #10B981;
    --error: #EF4444;
    --warning: #F59E0B;
  }

  * {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: #F5F5F5;
    color: #1A1A2E;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  input, textarea, select {
    font-size: 16px;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

@layer components {
  .brand-gradient {
    background: linear-gradient(135deg, #F26522, #D2232A);
  }

  .success-gradient {
    background: linear-gradient(135deg, #10B981, #059669);
  }

  .warning-gradient {
    background: linear-gradient(135deg, #FFC72C, #F59E0B);
  }

  .card-shadow {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .card-shadow-hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  }

  .button-shadow {
    box-shadow: 0 4px 12px rgba(242,101,34,0.30);
  }

  .nav-shadow {
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  }

  .dropdown-shadow {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }

  .safe-area-top {
    padding-top: env(safe-area-inset-top, 0px);
  }

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

  .text-balance {
    text-wrap: balance;
  }

  .skeleton-shimmer {
    background: linear-gradient(90deg, #E5E7EB 25%, #F0F0F0 50%, #E5E7EB 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  .glass-effect {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .touch-ripple {
    position: relative;
    overflow: hidden;
  }

  .touch-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(242,101,34,0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease;
    pointer-events: none;
  }

  .touch-ripple:active::after {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
}

@layer utilities {
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .pt-safe {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .h-screen-safe {
    height: 100dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
