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

:root {
  /* ==========================================
     PALETA MARKI - JEDYNE MIEJSCE EDYCJI KOLORÓW
     ========================================== */
  --brand-primary: #72BF44;           /* Zielony akcent marki */
  --brand-primary-rgb: 114, 191, 68;

  --brand-secondary: #e35205;         /* Pomarańczowy akcent */
  --brand-secondary-rgb: 227, 82, 5;

  --brand-dark: #111827;              /* Grafit sekcji alternatywnych */
  --brand-darker: #0a0f18;            /* Głęboka czerń główna */
  --brand-card: #161f2e;              /* Tło kart usług i opinii */
  --brand-light: #ffffff;
  --brand-gray: #9ca3af;              /* Szary tekst akapitowy (czytelny na czarnym!) */
  
  --section-pad: 6rem;
  --radius-card: 1.5rem;
}

@layer components {
  .brand-heading {
    @apply font-rubik font-light italic uppercase tracking-tighter text-4xl md:text-5xl text-white;
  }

  /* Tło sekcji alternatywnych z zielonym pozycjonowanym światłem z sufitu */
  .bg-section-alt {
    background-color: var(--brand-dark);
    background-image: 
      radial-gradient(at 50% 0%, rgba(var(--brand-primary-rgb), 0.09) 0%, transparent 75%),
      linear-gradient(180deg, var(--brand-darker) 0%, transparent 14%, transparent 86%, var(--brand-darker) 100%);
  }

  .card-base {
    @apply bg-brand-card border border-white/10 p-8 text-gray-300 transition-all duration-300 rounded-[1.5rem];
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
  }
  
  .card-base:hover {
    @apply border-brand-primary;
  }

  /* 1. Lekka tekstura karbonu/gridu (czysty CSS - 0 bajtów transferu!) */
  .bg-carbon-pattern {
    background-color: var(--brand-darker);
    background-image: 
      radial-gradient(hsla(0, 0%, 100%, 0.03) 1px, transparent 0),
      radial-gradient(hsla(0, 0%, 100%, 0.03) 1px, var(--brand-darker) 0);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
  }

  /* 2. Alternatywne tło z POMARAŃCZOWYM światłem dla strefy DIY / Garage Sharing */
  .bg-section-alt-orange {
    background-color: var(--brand-dark);
    background-image: 
      radial-gradient(at 50% 0%, rgba(var(--brand-secondary-rgb), 0.12) 0%, transparent 75%),
      linear-gradient(180deg, var(--brand-darker) 0%, transparent 14%, transparent 86%, var(--brand-darker) 100%);
  }

  /* 3. Jasna strefa kontrastowa dla Kalkulatora */
  .bg-section-light {
    background-color: #f8fafc;
    background-image: radial-gradient(rgba(114, 191, 68, 0.08) 1px, transparent 0);
    background-size: 32px 32px;
    color: var(--brand-darker);
  }

  /* Klasa dla głównych przycisków akcji */
  .btn-brand {
    @apply inline-flex items-center justify-center px-8 py-4 rounded-full font-bold text-center text-brand-darker bg-brand-primary hover:bg-brand-secondary hover:text-white transition-all duration-300 shadow-lg;
    box-shadow: 0 10px 25px -5px rgba(var(--brand-primary-rgb), 0.3);
  }

  .btn-brand:hover {
    box-shadow: 0 10px 25px -5px rgba(var(--brand-secondary-rgb), 0.4);
    transform: translateY(-2px);
  }
}