/* 
 * Stopy v srdci v2.0 - Základní proměnné pro jednotný design
 * Umístění: www/assets/css/theme.css
 * Zdroj v1:  www/assets/css/theme-variables.css (beze změny obsahu)
 */

:root {
    /* ====== BARVY ====== */
    
    /* Primární barvy - béžovo-hnědý odstín */
    --primary-color: #b08968;         /* Béžovo-hnědá - základní */
    --primary-hover: #96735a;         /* Tmavší béžovo-hnědá pro hovery */
    --primary-light: rgba(176, 137, 104, 0.1); /* Velmi světlá pro pozadí */
    --primary-medium: rgba(176, 137, 104, 0.3); /* Středně průhledná */
    --primary-transparent: rgba(176, 137, 104, 0.8); /* Téměř neprůhledná */
    
    /* Sekundární barvy */
    --secondary-color: #bcbcbc;        /* Středně šedá */
    --secondary-hover: #a0a0a0;        /* Tmavší šedá pro hovery */
    --secondary-light: rgba(188, 188, 188, 0.2); /* Světlá šedá pro pozadí */
    --secondary-medium: rgba(188, 188, 188, 0.5); /* Středně průhledná */
    --secondary-transparent: rgba(188, 188, 188, 0.8); /* Téměř neprůhledná */
    
    /* Pozadí a karty */
    --background-color: #B6B8B7;       /* Světlé šedozelené pozadí */
    --card-color: #DEDEDE;             /* Barva karet - světle šedá */
    --form-bg: #f5f5f5;                /* Světlá šedá pro formuláře */
    --white: #ffffff;                  /* Bílá */
    --black: #000000;                  /* Černá */
    
    /* Textové barvy */
    --text-color: #2C2C2C;             /* Téměř černá pro hlavní text */
    --text-secondary: #555;            /* Středně tmavý text */
    --text-light: #777;                /* Světlejší text */
    --text-placeholder: #888;          /* Pro placeholder texty */
    
    /* Stavové barvy */
    --success-color: #2ecc71;          /* Zelená */
    --success-hover: #27ae60;          /* Tmavší zelená */
    --success-light: rgba(46, 204, 113, 0.1); /* Světlá zelená */
    --success-medium: rgba(46, 204, 113, 0.5); /* Středně průhledná */
    --success-transparent: rgba(46, 204, 113, 0.8); /* Téměř neprůhledná */
    
    --warning-color: #f39c12;          /* Oranžová */
    --warning-hover: #e67e22;          /* Tmavší oranžová */
    --warning-light: rgba(243, 156, 18, 0.1); /* Světlá oranžová */
    --warning-medium: rgba(243, 156, 18, 0.5); /* Středně průhledná */
    --warning-transparent: rgba(243, 156, 18, 0.8); /* Téměř neprůhledná */
    
    --error-color: #e74c3c;            /* Červená */
    --error-hover: #c0392b;            /* Tmavší červená */
    --error-light: rgba(231, 76, 60, 0.1); /* Světlá červená */
    --error-medium: rgba(231, 76, 60, 0.5); /* Středně průhledná */
    --error-transparent: rgba(231, 76, 60, 0.8); /* Téměř neprůhledná */
    
    --info-color: #3498db;             /* Modrá */
    --info-hover: #2980b9;             /* Tmavší modrá */
    --info-light: rgba(52, 152, 219, 0.1); /* Světlá modrá */
    --info-medium: rgba(52, 152, 219, 0.5); /* Středně průhledná */
    --info-transparent: rgba(52, 152, 219, 0.8); /* Téměř neprůhledná */
    
    /* ====== TYPOGRAFIE ====== */
    
    /* Fonty */
    --font-primary: 'Patrick Hand', cursive;    /* Nová základní proměnná pro hlavní font */
    --font-title: 'Patrick Hand', cursive;      /* Hlavní nadpisy */
    --font-secondary: 'Patrick Hand', cursive;  /* Běžný text */
    --font-bio: 'Patrick Hand', cursive;        /* Biografické texty */

    /* Typografie - rozšíření */
    --base-font-size: 16px;
    --base-font-weight: 500;
    --base-line-height: 1.8;
    --base-letter-spacing: 0.02em;
    --text-paragraph-spacing: 1.2em;
    
    /* Velikosti textu */
    --font-size-xs: 0.75rem;           /* Extra malý text, 12px */
    --font-size-sm: 0.875rem;          /* Malý text, 14px */
    --font-size-md: 1rem;              /* Střední text, 16px */
    --font-size-lg: 1.25rem;           /* Velký text, 20px */
    --font-size-xl: 1.5rem;            /* Extra velký text, 24px */
    --font-size-xxl: 1.8rem;           /* Extra extra velký text, 32px */
    --font-size-huge: 2.2rem;          /* Obrovský text, 40px */
    
    /* Váhy fontů */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ====== ROZMĚRY ====== */
    
    /* Zaoblení rohů */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;
    --border-radius-xl: 16px;
    --border-radius-xxl: 20px;
    --border-radius-circle: 50%;
    
    /* Tloušťky ohraničení */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;
    --border-width-bold: 5px;
    
    /* Mezery */
    --spacing-xs: 5px;                 /* Extra malá mezera */
    --spacing-sm: 10px;                /* Malá mezera */
    --spacing-md: 15px;                /* Střední mezera */
    --spacing-lg: 20px;                /* Velká mezera */
    --spacing-xl: 30px;                /* Extra velká mezera */
    --spacing-xxl: 40px;               /* Extra extra velká mezera */
    
    /* Velikosti ikonek */
    --icon-size-xs: 12px;
    --icon-size-small: 16px;
    --icon-size-medium: 24px;
    --icon-size-large: 32px;
    --icon-size-xl: 48px;
    
    /* Velikosti tlačítek */
    --button-size-small: 32px;
    --button-size-medium: 44px;
    --button-size-large: 56px;
    
    /* Kontejnery a šířky */
    --container-max-width: 1200px;
    --container-padding: 20px;
    --container-narrow-width: 800px;
    --header-height: 60px;
    --footer-height: 80px;
    --sidebar-width: 250px;
    
    /* Container widths z edit_memorial */
    --container-width-xs: 60%;
    --container-width-sm: 70%;
    --container-width-md: 80%;
    --container-width-lg: 90%;
    --container-width-xl: 95%;
    --container-width-full: 100%;
    
    /* ====== STÍNY ====== */
    
    --shadow-small: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 10px rgba(0, 0, 0, 0.15);
    --shadow-large: 0 6px 15px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.25);
    
    /* Specializované stíny */
    --shadow-main: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.3);
    --shadow-button: 0 2px 5px rgba(0, 0, 0, 0.15);
    --shadow-photo: 0px 0px 15px rgba(182, 184, 183, 1);
    --shadow-card: 0 8px 16px rgba(0, 0, 0, 0.1);
    --shadow-input: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    
    /* ====== ANIMACE A PŘECHODY ====== */
    
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    
    /* ====== Z-INDEXY ====== */
    
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-fixed: 300;
    --z-index-modal-backdrop: 400;
    --z-index-modal: 500;
    --z-index-popover: 600;
    --z-index-toast: 700;
    --z-index-tooltip: 800;
    
    /* ====== INTERAKTIVNÍ PRVKY ====== */
    
    /* Tlačítka */
    --button-padding-small: var(--spacing-xs) var(--spacing-sm);
    --button-padding-medium: var(--spacing-sm) var(--spacing-md);
    --button-padding-large: var(--spacing-md) var(--spacing-lg);
    
    /* Formulářové prvky */
    --input-height: 40px;
    --input-padding: var(--spacing-sm) var(--spacing-md);
    --input-border-color: var(--secondary-color);
    --input-focus-border-color: var(--primary-color);
    --input-focus-shadow: 0 0 0 3px var(--primary-light);
    
    /* ====== BREAKPOINTY PRO RESPONZIVITU ====== */
    
    /* Poznámka: CSS proměnné nemohou být použity přímo v media queries,
       ale jsou zde uvedeny pro dokumentaci a konzistenci */
    /*
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    */
    
    /* ====== EFEKTY ====== */
    
    --hover-brightness: 1.1;
    --hover-lift: translateY(-3px);
    --active-scale: scale(0.98);
}