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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 13%; /* rgba(0,0,0,0.87) equivalent */
    --card: 0 0% 100%;
    --card-foreground: 0 0% 13%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 13%;
    --primary: 14 88% 54%; /* #F15A24 */
    --primary-foreground: 0 0% 100%;
    --secondary: 225 82% 19%; /* #071d5b */
    --secondary-foreground: 0 0% 100%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 0 0% 40%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 0 0% 13%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 14 88% 54%;
    --radius: 0.5rem;
  }
}

@layer components {
  /* Primary Gradient Button */
  .btn-primary-gradient {
    @apply bg-gradient-to-b from-primary-500 to-primary-700 text-white;
  }

  /* Secondary Gradient Background */
  .bg-secondary-gradient {
    @apply bg-gradient-to-b from-secondary-800 to-secondary-900;
  }

  /* Active Sidebar Item Gradient */
  .sidebar-active-gradient {
    @apply bg-gradient-to-b from-primary-500 to-primary-700;
  }

  /* Text Colors */
  .text-primary-default {
    color: rgba(0, 0, 0, 0.87);
  }

  .text-secondary-default {
    color: rgba(0, 0, 0, 0.60);
  }

  .text-disabled {
    color: rgba(0, 0, 0, 0.38);
  }

  .text-primary-brand {
    color: rgb(241, 90, 36);
  }
}