src/index.css

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

@layer base {
  :root {
    --background: 100 50% 98%;
    --foreground: 0 0% 10%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 10%;

    --primary: 120 50% 40%;
    --primary-foreground: 0 0% 100%;

    --secondary: 45 90% 75%;
    --secondary-foreground: 0 0% 10%;

    --muted: 0 0% 94%;
    --muted-foreground: 0 0% 50%;

    --accent: 0 70% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 120 50% 40%;

    --radius: 0.75rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 0 0% 20%;
    --sidebar-primary: 120 50% 40%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 96%;
    --sidebar-accent-foreground: 0 0% 10%;
    --sidebar-border: 0 0% 91%;
    --sidebar-ring: 120 50% 40%;
  }

  .dark {
    --background: 260 25% 12%;
    --foreground: 260 25% 96%;

    --card: 260 25% 16%;
    --card-foreground: 260 25% 96%;

    --popover: 260 25% 16%;
    --popover-foreground: 260 25% 96%;

    --primary: 260 60% 65%;
    --primary-foreground: 0 0% 100%;

    --secondary: 50 80% 75%;
    --secondary-foreground: 260 25% 12%;

    --muted: 260 25% 20%;
    --muted-foreground: 260 20% 70%;

    --accent: 260 25% 20%;
    --accent-foreground: 260 25% 96%;

    --destructive: 0 84% 55%;
    --destructive-foreground: 0 0% 100%;

    --border: 260 25% 26%;
    --input: 260 25% 26%;
    --ring: 260 60% 65%;

    --sidebar-background: 260 30% 14%;
    --sidebar-foreground: 260 25% 96%;
    --sidebar-primary: 260 60% 65%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 260 25% 20%;
    --sidebar-accent-foreground: 260 25% 96%;
    --sidebar-border: 260 25% 26%;
    --sidebar-ring: 260 60% 65%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  
  html, body {
    @apply antialiased;
    @apply bg-background text-foreground;
    -webkit-tap-highlight-color: transparent;
    height: 100%;
    overscroll-behavior: none;
  }
  
  #root {
    height: 100%;
  }
  
  input, textarea {
    @apply outline-none;
  }
  
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  /* For Firefox */
  input[type="number"] {
    -moz-appearance: textfield;
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-muted-foreground/30 rounded-full;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/50;
  }

  /* Tablet specific adjustments */
  @media (min-width: 768px) and (max-width: 1023px) {
    :root {
      font-size: 110%;
    }
  }
}

@layer components {
  .glass-panel {
    @apply bg-white/80 dark:bg-background/80 backdrop-blur-lg;
  }
  
  .paper-shadow {
    @apply shadow-[0_2px_6px_rgba(0,0,0,0.05),0_8px_24px_rgba(0,0,0,0.05)];
  }
  
  .subtle-shadow {
    @apply shadow-[0_2px_10px_rgba(0,0,0,0.03)];
  }
  
  .card-shadow {
    @apply shadow-[0_2px_20px_rgba(0,0,0,0.08)];
  }
  
  .floating-shadow {
    @apply shadow-[0_8px_30px_rgba(0,0,0,0.12)];
  }

  .tablet-container {
    @apply px-6 md:px-8 lg:px-4;
  }

  .afrique-gradient {
    @apply bg-gradient-to-br from-[#00a651] via-[#ffdd00] to-[#e31b23];
  }
  
  .violet-gradient {
    @apply bg-gradient-to-br from-violet via-violet-light to-violet-dark;
  }
  
  .dark-card {
    @apply bg-violet-darker/80 backdrop-blur-lg border border-violet-muted/20 text-white;
  }
}