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

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer base {
  :root {
    --background: 240 10% 3.9%; /* Dark Gray for cinematic feel - still used by components */
    --foreground: 0 0% 98%;
    --card: 240 10% 10%; /* Slightly lighter dark gray for cards */
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 240 10% 15%; /* Darker shade for primary elements */
    --primary-foreground: 0 0% 98%;
    --secondary: 240 10% 10%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 10% 15%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 180 100% 25.1%; /* Teal for interactive elements */
    --accent-foreground: 0 0% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 10% 15%;
    --input: 240 10% 15%;
    --ring: 180 100% 25.1%; /* Teal for ring */
    --chart-1: 340 90% 55%; /* Magenta/Pink from image */
    --chart-2: 210 90% 55%; /* Vivid Blue */
    --chart-3: 150 90% 45%; /* Lively Green */
    --chart-4: 48 95% 60%; /* Warm Gold/Yellow */
    --chart-5: 25 95% 60%; /* Rich Orange */
    --chart-6: 280 85% 65%; /* Purple */
    --chart-7: 180 85% 40%; /* Cyan/Teal */
    --chart-8: 0 85% 60%;   /* Bright Red */
    --chart-9: 75 90% 45%;  /* Lime Green */
    --chart-10: 300 90% 70%;/* Light Pink */
    --chart-11: 250 90% 60%;/* Indigo */
    --chart-12: 200 90% 50%;/* Sky Blue */
    --radius: 0.5rem;
    --sidebar-background: 240 10% 3.9%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 180 100% 25.1%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 10% 10%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 240 10% 15%;
    --sidebar-ring: 180 100% 25.1%;
  }

  /* This block originally set the default background and foreground.
     We will override the body's background below with the flag gradient.
     The --background variable is still useful for components.
  */
  /*
  html, body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
  */
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    /* Removed @apply bg-background text-foreground; to use the gradient */

    /* Apply Kenyan flag inspired background */
    background-image: linear-gradient(
      to bottom,
      #000000 0%, /* Black */
      #000000 30%,
      #FFFFFF 30%, /* White fimbriation */
      #FFFFFF 35%,
      #922529 35%, /* Red (approximated from official specs - Pantone 186C / #922529) */
      #922529 65%,
      #FFFFFF 65%, /* White fimbriation */
      #FFFFFF 70%,
      #008C51 70%, /* Green (approximated from official specs - Pantone 347C / #008C51) */
      #008C51 100%
    );
    background-attachment: fixed; /* Make background fixed during scroll */
    background-size: cover; /* Ensure it covers the whole page */
    background-repeat: no-repeat; /* Prevent tiling if content is smaller than viewport */
    color: hsl(var(--foreground)); /* Keep existing foreground color for text directly on body */

    /* Ensure body takes at least full viewport height for the gradient to show */
    min-height: 100vh;
  }
}