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

    @layer base {
      :root {
        --background-light: 0 0% 100%;
        --foreground-light: 240 10% 3.9%;
        --background-dark: 240 10% 3.9%;
        --foreground-dark: 0 0% 100%;
        --primary-color: 220 98% 61%;
        --button-light: hsl(220 98% 61%);
        --button-dark: hsl(200 80% 48%);
        --button-hover: hsl(210 70% 40%);
      }

      body {
        @apply font-sans transition-colors duration-300 ease-in-out;
      }

      body.light {
        background-color: hsl(var(--background-light));
        color: hsl(var(--foreground-light));
      }

      body.dark {
        background-color: hsl(var(--background-dark));
        color: hsl(var(--foreground-dark));
      }

      .btn-primary {
        background-color: var(--button-light);
        color: hsl(var(--foreground-dark));
        transition: background-color 0.3s ease;
      }

      body.dark .btn-primary {
        background-color: var(--button-dark);
        color: hsl(var(--foreground-light));
      }

      .btn-primary:hover {
        background-color: var(--button-hover);
      }

      .section-container {
        display: none;
      }

      .section-container.active {
        display: block;
      }
    }

    /* Dark Mode & Light Mode Toggle */
    body.dark-mode {
        background-color: #161616;
        color: white;
    }
    body.light-mode {
        background-color: #f1f1f1;
        color: black;
    }
    .toggle-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    /* Progress Bar Style */
    progress {
      width: 100%;
      height: 20px;
      margin-top: 1rem;
      border-radius: 5px;
    }

    /* Eye icon styles for password visibility toggle */
    .eye-icon {
      cursor: pointer;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.2rem;
      color: #aaa;
    }

    /* Dark Mode Password Input Styles */
    .dark-mode #password {
      background-color: #333; /* Dark background */
      color: white; /* White text */
      border: 1px solid #555; /* Dark border */
    }

    .dark-mode #password::placeholder {
      color: #aaa; /* Light placeholder text for dark mode */
    }

    .dark-mode #togglePassword {
      color: #aaa; /* Eye icon color in dark mode */
    }

    /* Optional: Focus state for better UX */
    .dark-mode #password:focus {
      outline: none;
      border-color: #4CAF50; /* Green border when focused */
      box-shadow: 0 0 5px rgba(76, 175, 80, 0.6); /* Light green focus shadow */
    }

    /* Button Styles */
    .btn-primary {
      background-color: #4CAF50; /* Green button */
      color: white;
      border-radius: 5px;
      padding: 12px 20px;
      text-align: center;
      width: 100%;
      cursor: pointer;
      font-weight: bold;
      transition: background-color 0.3s;
    }

    .btn-primary:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }

    .btn-primary:hover {
      background-color: #45a049;
    }

    /* Hide progress initially */
    .progress-bar {
      width: 0%;
      height: 100%;
      background-color: #4caf50;
      border-radius: 5px;
    }