/* Color variables */
:root {
  --color-text: #000f08;
  --color-bg: #E5F7FB; /* světlá modrá */
  --color-primary: #3B97A5; /* tyrkysová */
  --color-secondary: #7FD3E4; /* světlejší modrá */
  --color-accent: #E6DE65; /* žlutá */
  --color-highlight: #8A7B00; /* olivová */
  --color-header-bg: transparent;
  --color-table-bg: #dddddd;
  --color-table-border: #cccccc;
  --color-border-glow: rgba(127, 211, 228, 0.3);
  
  /* Layout */
  --header-height: 60px;
  --footer-height: 80px;
  --content-max-width: 1200px;
  
  /* Typography */
  --font-main: 'Segoe UI', sans-serif;
  --font-decorative: 'Monotype Corsiva', cursive;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
  
  /* Borders */
  --border-radius: 4px;
  
  /* Transitions */
  --transition-speed: 0.8s;
  --transition-function: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-timing: var(--transition-speed) var(--transition-function);
}

/* Dark mode variables */
body.dark-mode {
  --color-text: #e8f0f0;
  --color-bg: #04161a; /* Updated to match styleTimePage.css */
  --color-primary: #3AB7BF;  
  --color-secondary: #217482;
  --color-accent: #cfc554;
  --color-highlight: #f5e642;
  --color-header-bg: var(--color-bg); /* Changed to use the same value as body bg */
  --color-table-bg: #333333;
  --color-table-border: #444444;
  --color-border-glow: rgba(127, 211, 228, 0.15);
}