/* ==========================================================================
   PAVEL HORÁK — Design System
   pavelhorak.cz

   Tento soubor definuje pouze CSS custom properties (proměnné).
   Žádné třídy ani komponenty — pouze design tokeny.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts — Inter (načítáno přes <link> v HTML hlavičce, ne @import)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   ROOT PROMĚNNÉ
   -------------------------------------------------------------------------- */
:root {

  /* -------------------------------------------------------------------------
     BARVY — Primární paleta
     Titanová modř: tmavá, modro-šedá — hlavní brand barva
     Zlatá: akcent pro tmavý mód (na tmavém pozadí)
     Oranžová: akcent pro světlý mód (na bílém pozadí)
     ------------------------------------------------------------------------- */

  /* Primární — titanová modř */
  --color-primary-50:  #EEF1F5;
  --color-primary-100: #D5DCE6;
  --color-primary-200: #ADBACE;
  --color-primary-300: #7F97B0;
  --color-primary-400: #567494;
  --color-primary-500: #3D5870;  /* střední */
  --color-primary-600: #2D3E50;  /* hlavní brand */
  --color-primary-700: #1F2E3D;
  --color-primary-800: #141E28;
  --color-primary-900: #0A1018;
  --color-primary:     #2D3E50;
  --color-primary-dark: #1A2B3C;
  --color-primary-darker: #0F1923;

  /* Akcent — zlatá (tmavý mód, na tmavém pozadí) */
  --color-accent-gold-light: #E8D5A3;
  --color-accent-gold:       #C9A84C;  /* hlavní zlatá */
  --color-accent-gold-dark:  #B8942E;  /* hover stav */
  --color-accent-gold-darker:#9A7A20;

  /* Akcent — oranžová (světlý mód, na světlém pozadí) */
  --color-accent-orange-light: #FDDEC8;
  --color-accent-orange:       #E87C3E;  /* hlavní oranžová */
  --color-accent-orange-dark:  #D06A2C;  /* hover stav */
  --color-accent-orange-darker:#B85820;

  /* Pozadí */
  --color-bg-dark:    #0F1923;  /* tmavý mód — hlavní pozadí */
  --color-bg-dark-2:  #1A2B3C;  /* tmavý mód — sekce */
  --color-bg-dark-3:  #243347;  /* tmavý mód — karty */
  --color-bg-light:   #FAFAFA;  /* světlý mód — hlavní pozadí */
  --color-bg-light-2: #F3F4F6;  /* světlý mód — sekce */
  --color-bg-light-3: #FFFFFF;  /* světlý mód — karty */

  /* Text */
  --color-text-on-dark:        #F0EDE8;  /* hlavní text na tmavém */
  --color-text-on-dark-muted:  #A8B5C5;  /* sekundární text na tmavém */
  --color-text-on-light:       #1A2B3C;  /* hlavní text na světlém */
  --color-text-on-light-muted: #6B7280;  /* sekundární text na světlém */

  /* Šedé — UI prvky */
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* Stavové barvy */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;
  --color-info:    #3B82F6;

  /* Aktuální téma — výchozí tmavý mód */
  --color-bg:          var(--color-bg-dark);
  --color-bg-surface:  var(--color-bg-dark-2);
  --color-bg-card:     var(--color-bg-dark-3);
  --color-text:        var(--color-text-on-dark);
  --color-text-muted:  var(--color-text-on-dark-muted);
  --color-accent:      var(--color-accent-gold);
  --color-accent-hover:var(--color-accent-gold-dark);
  --color-border:      rgba(255, 255, 255, 0.10);
  --color-border-hover:rgba(255, 255, 255, 0.20);

  /* -------------------------------------------------------------------------
     TYPOGRAFIE
     Font: Inter (Google Fonts)
     ------------------------------------------------------------------------- */

  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Velikosti textu */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* Váhy */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Výška řádku */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0em;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;
  --tracking-widest: 0.1em;

  /* -------------------------------------------------------------------------
     SPACING — 8px grid
     ------------------------------------------------------------------------- */

  --space-0:  0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;     /* 56px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-28: 7rem;       /* 112px */
  --space-32: 8rem;       /* 128px */

  /* -------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------- */

  --container-max:      1200px;
  --container-narrow:   800px;
  --container-wide:     1400px;
  --container-padding:  clamp(1rem, 5vw, 2rem);

  /* -------------------------------------------------------------------------
     BREAKPOINTY
     Použití: @media (min-width: var(--bp-md)) — NEFUNGUJE v CSS media queries!
     Použij přímo hodnoty nebo definuj v JS: const bp = getComputedStyle...
     Breakpointy jsou zde pro dokumentaci a JS použití.
     ------------------------------------------------------------------------- */

  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* -------------------------------------------------------------------------
     BORDER RADIUS
     ------------------------------------------------------------------------- */

  --radius-none: 0;
  --radius-sm:   0.25rem;   /* 4px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-3xl:  2rem;      /* 32px */
  --radius-full: 9999px;

  /* -------------------------------------------------------------------------
     STÍNY
     ------------------------------------------------------------------------- */

  --shadow-sm:
    0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.4),
    0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.5),
    0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.5),
    0 8px 10px -6px rgba(0, 0, 0, 0.3);
  --shadow-glow-accent:
    0 0 30px rgba(201, 168, 76, 0.15);  /* zlatá záře — pro CTA prvky */
  --shadow-glow-accent-orange:
    0 0 30px rgba(232, 124, 62, 0.15);  /* oranžová záře */

  /* -------------------------------------------------------------------------
     PŘECHODY (TRANSITIONS)
     ------------------------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -------------------------------------------------------------------------
     Z-INDEX SYSTÉM
     ------------------------------------------------------------------------- */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;

  /* -------------------------------------------------------------------------
     KOMPONENTY — sdílené hodnoty
     ------------------------------------------------------------------------- */

  /* Tlačítka */
  --btn-height-sm:  2.25rem;   /* 36px */
  --btn-height-md:  2.75rem;   /* 44px */
  --btn-height-lg:  3.25rem;   /* 52px */
  --btn-padding-sm: var(--space-2) var(--space-4);
  --btn-padding-md: var(--space-3) var(--space-6);
  --btn-padding-lg: var(--space-4) var(--space-8);
  --btn-radius:     var(--radius-full);  /* pill shape */

  /* Formuláře */
  --input-height:   3rem;       /* 48px */
  --input-padding:  var(--space-3) var(--space-4);
  --input-radius:   var(--radius-md);
  --input-border:   1px solid var(--color-border);
  --input-focus-border: var(--color-accent);

  /* Navigace */
  --nav-height:     4.5rem;    /* 72px */
  --nav-height-sm:  3.5rem;    /* 56px */

  /* Sticky CTA (mobil) */
  --sticky-cta-height: 4rem;   /* 64px */
  --sticky-cta-z:  var(--z-sticky);

  /* Sekce padding */
  --section-padding-y: clamp(3rem, 8vw, 6rem);
  --section-padding-x: var(--container-padding);

}

/* --------------------------------------------------------------------------
   SVĚTLÝ MÓD — přepsání akcentové barvy a pozadí
   Aktivovat třídou .light-mode na <html> nebo <body>
   -------------------------------------------------------------------------- */
.light-mode {
  --color-bg:          var(--color-bg-light);
  --color-bg-surface:  var(--color-bg-light-2);
  --color-bg-card:     var(--color-bg-light-3);
  --color-text:        var(--color-text-on-light);
  --color-text-muted:  var(--color-text-on-light-muted);
  --color-accent:      var(--color-accent-orange);       /* oranžová, ne zlatá */
  --color-accent-hover:var(--color-accent-orange-dark);
  --color-border:      rgba(0, 0, 0, 0.10);
  --color-border-hover:rgba(0, 0, 0, 0.20);
  --shadow-sm:
    0 1px 2px 0 rgba(0, 0, 0, 0.08);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.12),
    0 2px 4px -2px rgba(0, 0, 0, 0.08);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.15),
    0 4px 6px -4px rgba(0, 0, 0, 0.08);
}