/**
 * Barevná paleta obce Zlosyn
 * 
 * Tento soubor obsahuje všechny barvy použité na webu obce Zlosyn.
 * Barvy jsou odvozeny z obecního znaku.
 * 
 * Použití: Importujte tento soubor do vašeho main.css nebo jej použijte samostatně.
 */

:root {
  /* ========================================
     PRIMÁRNÍ BARVY (z obecního znaku)
     ======================================== */
  
  /* Zelená lesní - hlavní barva ze znaku (obilí, zelené pole) */
  --zlosyn-green-main: #2c5530;
  --zlosyn-green-main-rgb: 44, 85, 48;
  
  /* Červená obecní - červená ze znaku obce */
  --zlosyn-red-main: #c92127;
  --zlosyn-red-main-rgb: 201, 33, 39;
  
  /* Zlatá obilná - barva obilných klasů ze znaku */
  --zlosyn-gold: #e5c687;
  --zlosyn-gold-rgb: 229, 198, 135;
  
  
  /* ========================================
     DOPLŇKOVÉ BARVY
     ======================================== */
  
  /* Zelená tmavá - pro texty, patičku, tmavší prvky */
  --zlosyn-green-dark: #1a3a1e;
  --zlosyn-green-dark-rgb: 26, 58, 30;
  
  /* Zelená střední - pro hover efekty, pozadí */
  --zlosyn-green-medium: #4a7c50;
  --zlosyn-green-medium-rgb: 74, 124, 80;
  
  /* Zelená světlá - pro jemné pozadí */
  --zlosyn-green-light: #e8f5e9;
  --zlosyn-green-light-rgb: 232, 245, 233;
  
  /* Červená tmavá - pro hover efekty, stíny */
  --zlosyn-red-dark: #a31d22;
  --zlosyn-red-dark-rgb: 163, 29, 34;
  
  /* Červená světlá - pro jemné pozadí upozornění */
  --zlosyn-red-light: #fce4e4;
  --zlosyn-red-light-rgb: 252, 228, 228;
  
  
  /* ========================================
     NEUTRÁLNÍ BARVY
     ======================================== */
  
  /* Bílá - pozadí stránky, karty */
  --zlosyn-white: #ffffff;
  --zlosyn-white-rgb: 255, 255, 255;
  
  /* Šedá světlá - alternativní pozadí */
  --zlosyn-gray-light: #f5f5f5;
  --zlosyn-gray-light-rgb: 245, 245, 245;
  
  /* Šedá střední - pomocný text */
  --zlosyn-gray-medium: #666666;
  --zlosyn-gray-medium-rgb: 102, 102, 102;
  
  /* Šedá tmavá - běžný text */
  --zlosyn-gray-dark: #333333;
  --zlosyn-gray-dark-rgb: 51, 51, 51;
  
  /* Černá - pro zvýraznění */
  --zlosyn-black: #000000;
  --zlosyn-black-rgb: 0, 0, 0;
  
  
  /* ========================================
     SÉMANTICKÉ BARVY (pro použití v šabloně)
     ======================================== */
  
  /* Pozadí */
  --background-color: var(--zlosyn-white);
  --background-light: var(--zlosyn-gray-light);
  --background-dark: var(--zlosyn-green-dark);
  
  /* Text */
  --text-default: var(--zlosyn-gray-dark);
  --text-secondary: var(--zlosyn-gray-medium);
  --text-on-dark: var(--zlosyn-white);
  
  /* Nadpisy */
  --heading-color: var(--zlosyn-green-dark);
  --heading-on-dark: var(--zlosyn-gold);
  
  /* Akcentové barvy */
  --accent-primary: var(--zlosyn-green-main);
  --accent-secondary: var(--zlosyn-red-main);
  --accent-tertiary: var(--zlosyn-gold);
  
  /* Interaktivní prvky */
  --link-color: var(--zlosyn-green-main);
  --link-hover: var(--zlosyn-green-medium);
  --button-primary: var(--zlosyn-green-main);
  --button-primary-hover: var(--zlosyn-green-dark);
  --button-secondary: var(--zlosyn-red-main);
  --button-secondary-hover: var(--zlosyn-red-dark);
  
  /* Stav prvků */
  --success: var(--zlosyn-green-medium);
  --warning: var(--zlosyn-gold);
  --error: var(--zlosyn-red-main);
  --info: var(--zlosyn-green-main);
  
  /* Okraje a oddělovače */
  --border-light: #e0e0e0;
  --border-medium: #cccccc;
  --border-dark: var(--zlosyn-gray-medium);
}


/* ========================================
   POMOCNÉ TŘÍDY PRO BARVY
   ======================================== */

/* Pozadí - primární barvy */
.bg-green-main { background-color: var(--zlosyn-green-main) !important; color: var(--zlosyn-white); }
.bg-red-main { background-color: var(--zlosyn-red-main) !important; color: var(--zlosyn-white); }
.bg-gold { background-color: var(--zlosyn-gold) !important; color: var(--zlosyn-green-dark); }

/* Pozadí - doplňkové barvy */
.bg-green-dark { background-color: var(--zlosyn-green-dark) !important; color: var(--zlosyn-white); }
.bg-green-medium { background-color: var(--zlosyn-green-medium) !important; color: var(--zlosyn-white); }
.bg-green-light { background-color: var(--zlosyn-green-light) !important; color: var(--zlosyn-green-dark); }

/* Pozadí - neutrální barvy */
.bg-white { background-color: var(--zlosyn-white) !important; }
.bg-gray-light { background-color: var(--zlosyn-gray-light) !important; }

/* Textové barvy */
.text-green-main { color: var(--zlosyn-green-main) !important; }
.text-red-main { color: var(--zlosyn-red-main) !important; }
.text-gold { color: var(--zlosyn-gold) !important; }
.text-green-dark { color: var(--zlosyn-green-dark) !important; }
.text-gray-medium { color: var(--zlosyn-gray-medium) !important; }
.text-gray-dark { color: var(--zlosyn-gray-dark) !important; }

/* Okraje */
.border-green-main { border-color: var(--zlosyn-green-main) !important; }
.border-red-main { border-color: var(--zlosyn-red-main) !important; }
.border-gold { border-color: var(--zlosyn-gold) !important; }


/* ========================================
   PŘÍKLADY POUŽITÍ
   ======================================== */

/*
  Primární tlačítko:
  <button class="bg-green-main">Odeslat</button>
  
  Sekundární tlačítko:
  <button class="bg-red-main">Důležité</button>
  
  Zvýrazněná sekce:
  <div class="bg-gold">Důležitá informace</div>
  
  Nadpis:
  <h2 class="text-green-dark">Nadpis</h2>
  
  Odkaz:
  <a href="#" style="color: var(--zlosyn-green-main)">Odkaz</a>
*/