web_app_pro/frontend/src/index.css

@import "tailwindcss";
@config "../tailwind.config.js";

@layer base {
  :root {
    --bg-primary: #f8faf8;
    --bg-secondary: #f0f4f0;
    --text-primary: #1e2d1e;
    --text-secondary: #5a6a5a;
    --accent-primary: #557c55;
    --accent-secondary: #7fa27f;
    --accent-muted: #e8eee8;
  }

  [data-theme="dark"] {
    --bg-primary: #0d120d;
    --bg-secondary: #121812;
    --text-primary: #e0e8e0;
    --text-secondary: #a0baa0;
    --accent-primary: #8ab68a;
    --accent-secondary: #608560;
    --accent-muted: #1a231a;
  }

  body {
    background-color: var(--bg-primary);
    background-image:
      radial-gradient(
        1200px 600px at 10% -10%,
        rgba(85, 124, 85, 0.22),
        transparent 60%
      ),
      radial-gradient(
        900px 500px at 100% 0%,
        rgba(127, 162, 127, 0.16),
        transparent 55%
      ),
      linear-gradient(180deg, #f8fbf8 0%, #eef5ee 100%);
    color: var(--text-primary);
    font-family: "Outfit", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
  }

  [data-theme="dark"] body {
    background-image:
      radial-gradient(
        1100px 600px at 10% -10%,
        rgba(138, 182, 138, 0.15),
        transparent 60%
      ),
      radial-gradient(
        900px 520px at 100% 0%,
        rgba(96, 133, 96, 0.14),
        transparent 55%
      ),
      linear-gradient(180deg, #0d120d 0%, #111811 100%);
  }

  ::selection {
    background-color: #e0e8e0;
    color: #1e2d1e;
  }
}

@layer components {
  .glass {
    background: color-mix(in srgb, white 40%, transparent);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12);
  }

  .glass-premium {
    background: color-mix(in srgb, white 14%, transparent);
    backdrop-filter: blur(32px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
  }

  .apple-glass-panel {
    background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.28) 100%
    );
    backdrop-filter: blur(26px) saturate(140%);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.48);
    box-shadow:
      0 20px 50px -24px rgba(43, 70, 43, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.75);
  }

  [data-theme="dark"] .apple-glass-panel {
    background: linear-gradient(
      160deg,
      rgba(22, 30, 22, 0.72) 0%,
      rgba(12, 18, 12, 0.62) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
      0 22px 56px -26px rgba(0, 0, 0, 0.65),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: all 0.3s ease;
  }

  .btn-primary {
    background: #557c55;
    color: white;
    box-shadow: 0 10px 24px -8px rgba(85, 124, 85, 0.45);
  }

  .btn-primary:hover {
    background: #4a6d4a;
    transform: translateY(-2px);
  }

  .btn-secondary {
    background: color-mix(in srgb, white 22%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
  }

  .btn-secondary:hover {
    background: color-mix(in srgb, white 42%, transparent);
    border-color: rgba(85, 124, 85, 0.5);
  }
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .animate-pulse-sage {
    animation: pulse-sage 4s ease-in-out infinite;
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(164, 180, 148, 0.2);
    border-radius: 10px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(164, 180, 148, 0.4);
  }

  .text-gradient {
    background: linear-gradient(135deg, var(--text-primary), #557c55);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-sage {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(1.05);
  }
}