/**
 * GLOBAL DESIGN TOKENS
 *
 * Základní design systém pro celý STSL web
 * Zdroj: stsl-log-scrapping/design/design-tokens.css
 *
 * Obsahuje:
 * - Barevnou paletu (neutrální pojmenování - popisují barvu, ne použití)
 * - Graphics (underline, background textures)
 * - Font families
 *
 * Poznámka: Sémantické pojmenování barev je v subsekce tokens
 * (stories-tokens.css, logentries-tokens.css, atd.)
 */

:root {
  /* ============================================
     BAREVNÁ PALETA (Neutrální pojmenování)
     ============================================ */

  /* Zelené odstíny */
  --color-light-green: rgb(192, 233, 192);        /* Světle zelená */

  /* Oranžové/broskvové odstíny */
  --color-light-orange: rgb(255, 217, 157);       /* Světle oranžová/broskvová */
  --color-peach: rgb(255, 217, 157);              /* Alias pro light-orange */

  /* Růžové/červené odstíny */
  --color-light-pink: rgb(255, 128, 128);         /* Světle růžová */
  --color-dark-red: rgb(204, 102, 102);           /* Tmavě červená */

  /* Modré odstíny */
  --color-light-blue: rgb(204, 204, 255);         /* Světle modrá */

  /* Béžové/šedé odstíny */
  --color-light-beige: rgb(233, 228, 226);        /* Světle béžová */
  --color-off-white: rgb(245, 244, 244);          /* Téměř bílá */
  --color-medium-gray: rgb(166, 166, 166);        /* Střední šedá */

  /* Tmavé odstíny */
  --color-dark-gray: #121212;                     /* Tmavě šedá (téměř černá) */
  --color-black: rgb(0, 0, 0);                    /* Černá */


  /* ============================================
     SÉMANTICKÉ BARVY (Shared across all sections)
     ============================================ */

  /* Text colors - mapování z global palette */
  --color-text-primary: var(--color-light-beige);
  --color-text-header: var(--color-off-white);
  --color-text-meta: var(--color-medium-gray);
  --color-text-divider: var(--color-medium-gray);

  /* Background colors */
  --color-background-page: var(--color-dark-gray);
  --color-background-content: transparent;

  /* UI colors */
  --color-ui-primary: var(--color-light-blue);
  --color-ui-hover: var(--color-light-beige);

  /* Panel styling (shared - dashboard, about) */
  --color-panel-border: rgba(204, 204, 255, 0.15);
  --color-panel-header-bg: linear-gradient(135deg,
    rgba(204, 204, 255, 0.12) 0%,
    rgba(166, 166, 166, 0.12) 100%);


  /* ============================================
     GRAPHICS (Root-relative paths)
     ============================================ */

  /* Background texture */
  --background-texture-img: url('/assets/graphics/background-texture-alpha.png');
  --background-blend-mode: multiply;

  /* Underline graphics - Variant 01 */
  --underline-01-img: url('/assets/graphics/underline-01.png');
  --underline-01-height: 5px;
  --underline-01-overhang: 4px;

  /* Underline graphics - Variant 02 */
  --underline-02-img: url('/assets/graphics/underline-02.png');
  --underline-02-height: 6px;
  --underline-02-overhang: 6px;

  /* Underline graphics - Variant 03 */
  --underline-03-img: url('/assets/graphics/underline-03.png');
  --underline-03-height: 6px;
  --underline-03-overhang: 12px;

  /* Underline graphics - Variant 04 */
  --underline-04-img: url('/assets/graphics/underline-04.png');
  --underline-04-height: 6px;
  --underline-04-overhang:8px;

  /* Underline graphics - Variant 05 (tall — extends deep below text) */
  --underline-05-img: url('/assets/graphics/underline-05.png');
  --underline-05-height: 18px;
  --underline-05-overhang: 8px;

  /* Underline graphics - Variant Short (for short links like "Read") */
  --underline-short-img: none; /*url('/assets/graphics/underline-01.svg');*/
  --underline-short-height: 6px;
  --underline-short-hover-img: url('/assets/graphics/underline-04.svg');
  --underline-short-hover-height: 8px;

  /* Underline properties */
  --underline-offset: 2px;
  --underline-opacity: 1.0;


  /* ============================================
     FONT FAMILIES
     ============================================ */

  /* System/UI font (Space Mono - local) */
  --font-family-system: 'Space Mono', monospace;

  /* Story font (Source Serif Pro - online CDN) */
  --font-family-story: 'Source Serif Pro', Georgia, serif;

  /* Handwritten font (Caveat - local, pro log entries) */
  --font-family-handwritten: 'Caveat', cursive;


  /* ============================================
     PAGE LAYOUT (Shared across all sections)
     ============================================ */

  --page-max-width: 1200px;                     /* Max šířka page containeru */
  --page-width-content: 900px;                  /* Content wrapper width (optimální pro čtení) */

  /* Margins */
  --margin-horizontal: 2rem;                    /* 32px - Boční padding content-wrapper (desktop) */
  --margin-horizontal-mobile: 1rem;             /* 16px - Boční margin (mobile) */
  --margin-top: 3rem;                           /* 40px - Horní margin page-container */
  --margin-bottom: 3.75rem;                     /* 60px - Dolní margin k navigaci */


  /* ============================================
     BREADCRUMBS (Shared across all sections)
     ============================================ */

  --font-size-breadcrumb: 1rem;                 /* 12pt / 16px */
  --font-size-breadcrumb-mobile: 0.92rem;       /* 11pt / 14.67px */
  --breadcrumb-separator-spacing: 0.5em;        /* Mezera kolem separátoru */
  --breadcrumb-link-underline: none;            /* Bez podtržení */
  --breadcrumb-link-underline-hover: underline; /* Podtržení při hover */
  --spacing-breadcrumb-top: 4em;                /* Odsazení nad breadcrumbs */
  --spacing-breadcrumb-top-mobile: 2em;         /* Odsazení nad breadcrumbs (mobile) */
  --spacing-breadcrumb-horizontal: 80px;        /* Horizontální odsazení breadcrumbs */
  --spacing-breadcrumb-to-header: 1em;          /* Mezera od breadcrumbs k headeru */


  /* ============================================
     FOOTER (Shared across all sections)
     ============================================ */

  --footer-font-size: 0.75rem;                 /* 14px - Drobné písmo */
  --spacing-footer-top: 2rem;                   /* Odsazení nad textem footeru */
  --spacing-footer-bottom: 2rem;                /* Odsazení pod textem footeru */
  --spacing-footer-horizontal: 80px;            /* Stejné jako breadcrumbs */
}


/* ============================================
   ACCESSIBILITY UTILITIES
   ============================================ */

/* Visually hidden, accessible to screen readers and crawlers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}