/* ========================================
   Design Tokens — CSS Custom Properties
   All colors, fonts, spacing, and breakpoints
   ======================================== */

:root {
  /* --- Colors (Light mode default) --- */
  /* Logo gradient: #E00014 (red) → #FF7C1B (orange) */
  --color-primary: #FF7C1B;
  --color-primary-dark: #E00014;
  --color-primary-light: #FF9F4A;
  --color-gradient: linear-gradient(135deg, #E00014, #FF7C1B);

  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F5F5;
  --color-bg-card: #FFFFFF;
  --color-text: #4A4A4A;
  --color-text-muted: #6B7280;
  --color-text-light: #9CA3AF;
  --color-border: #E5E7EB;
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* Header */
  --color-header-bg: rgba(255, 255, 255, 0.95);
  --color-header-shadow: rgba(0, 0, 0, 0.08);

  /* Hero */
  --color-hero-overlay: rgba(15, 23, 36, 0.7);

  /* Tmavé sekce (hero, page-header, CTA) — v light módu: neutrální šedá */
  --color-dark-section: linear-gradient(135deg, #4B5563 0%, #374151 100%);

  /* Footer */
  --color-footer-bg: #374151;
  --color-footer-text: #F1F3F5;

  /* --- Typography --- */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --fs-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --fs-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --fs-4xl: clamp(2.5rem, 1.8rem + 3.5vw, 4rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* --- Spacing --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* --- Layout --- */
  --container-max: 1280px;
  --container-padding: clamp(1.25rem, 6vw, 1.5rem);

  /* --- Border radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.15);

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* --- Z-index --- */
  --z-header: 1000;
  --z-overlay: 1001;
  --z-lightbox: 1100;
}

/* --- Dark mode --- */
[data-theme="dark"] {
  --color-bg: #2A2A2A;
  --color-bg-alt: #323232;
  --color-bg-card: #3A3A3A;
  --color-text: #F8F9FA;
  --color-text-muted: #B0B0B0;
  --color-text-light: #808080;
  --color-border: #484848;

  --color-header-bg: rgba(42, 42, 42, 0.95);
  --color-header-shadow: rgba(0, 0, 0, 0.3);

  /* Tmavé sekce v dark módu: teplá uhlová šedá (ne navy) */
  --color-dark-section: linear-gradient(135deg, #303030 0%, #282828 100%);

  --color-footer-bg: #1E1E1E;
  --color-footer-text: #9CA3AF;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.6);
}