/**
 * STORYBOOK TOKENS
 *
 * Design tokens pro story book komponenty (3.3-story-cover, 3.4-story-chapter)
 * Importuje: stories-tokens.css (který importuje global-tokens.css)
 *
 * Font: Source Serif Pro (vypravěč)
 * Layout: 900px content width (optimální pro knižní čtení)
 *
 * Komponenty používající tyto tokeny:
 * - 3.3-story-cover
 * - 3.4-story-chapter
 */

@import url('/assets/css/tokens/stories-tokens.css');

:root {
  /* ============================================
     LAYOUT - Storybook specific
     ============================================ */

  --page-width-content: 900px;                  /* Optimální pro čtení */
  --page-width-graphic-space: 150px;            /* Prostor na každé straně pro grafiku */

  /* Content Width */
  --content-max-chars: 75ch;                    /* Max 75 znaků na řádek (backup) */

  /* Margins */
  --margin-horizontal: 0;                       /* No horizontal margin on desktop (original value) */
  /* --margin-top and --margin-bottom inherited from stories-tokens.css */


  /* ============================================
     TYPOGRAPHY - Source Serif Pro stack
     ============================================ */

  /* Font Sizes - Desktop */
  --font-size-story-body: 1.125rem;             /* 14pt / 18.66px */
  --font-size-story-title: 1.5rem;              /* 18pt / 24px */
  --font-size-chapter-title: 1.83rem;           /* 22pt / 29.33px */
  --font-size-breadcrumb: 1rem;                 /* 12pt / 16px */
  --font-size-navigation: 1rem;                 /* 12pt / 16px */
  --font-size-divider: 1.125rem;                /* 14pt / 18.66px */

  /* Font Sizes - Mobile */
  --font-size-story-body-mobile: 1.08rem;       /* 13pt / 17.33px */
  --font-size-story-title-mobile: 1.33rem;      /* 16pt / 21.33px */
  --font-size-chapter-title-mobile: 1.5rem;     /* 18pt / 24px */
  --font-size-breadcrumb-mobile: 0.92rem;       /* 11pt / 14.67px */
  --font-size-navigation-mobile: 0.92rem;       /* 11pt / 14.67px */

  /* Line Heights */
  --line-height-story: 1.5;                     /* Optimální pro Source Serif Pro (původní hodnota) */
  --line-height-title: 1.3;
  --line-height-header: 1.3;                    /* Pro nadpisy */
  --line-height-navigation: 1.4;                /* Pro UI prvky */

  /* Letter Spacing */
  --letter-spacing-story: 0.01em;               /* Jemné rozvolnění */
  --letter-spacing-title: 0.02em;               /* Pro title */
  --letter-spacing-header: 0;                   /* Standardní pro nadpisy */
  --letter-spacing-navigation: 0.05em;          /* Pro UI prvky */


  /* ============================================
     SPACING - Storybook specific
     ============================================ */

  /* Paragraph spacing */
  --paragraph-spacing: 1.2em;
  --spacing-paragraph-small: 0.45em;            /* Jednoduchý prázdný řádek (cca 8px) */
  --spacing-paragraph-large: 2em;               /* Dvojitý prázdný řádek */
  --paragraph-spacing-large: 2.4em;             /* Alias pro kompatibilitu */

  /* Section spacing */
  --spacing-divider-top: 3em;                   /* Odsazení nad section divider */
  --spacing-divider-bottom: 3em;                /* Odsazení pod section divider */

  /* Header spacing */
  --spacing-header-title-gap: 0.5em;            /* Mezera mezi názvem a číslem kapitoly */
  --spacing-header-to-content: 3em;             /* Mezera od headeru k obsahu */

  /* Navigation spacing */
  --spacing-nav-to-content: 2em;                /* Mezera od navigace k obsahu */
  --breadcrumb-spacing: 1rem;
  --navigation-spacing: 2rem;

  /* Breadcrumbs - inherited from global-tokens.css */


  /* ============================================
     NAVIGATION BUTTONS
     ============================================ */

  --nav-button-padding: 0.5em 0;                /* Malý vertikální padding */
  --nav-button-background: transparent;
  --nav-button-background-hover: rgba(204, 204, 255, 0.1);

  /* Underline Graphics (for navigation underlines) */
  --underline-offset: 2px;
  --underline-opacity: 1.0;


  /* ============================================
     SECTION DIVIDER
     ============================================ */

  --divider-text-align: center;                 /* Zarovnání ASCII art */
  --divider-opacity: 0.7;                       /* Lehká průhlednost */


  /* ============================================
     BACKGROUND
     ============================================ */

  --background-blend-mode: multiply;            /* Background texture blend mode */


  /* ============================================
     COVER PAGE SPECIFIC (3.3-story-cover)
     ============================================ */

  /* Cover title */
  --font-size-cover-title: 2.66rem;             /* 32pt / 42.66px - Výrazně větší než chapter title */
  --font-size-cover-title-mobile: 2rem;         /* 24pt / 32px */

  /* Cover image */
  --cover-image-max-width: 700px;               /* Max šířka cover obrázku */
  --cover-image-max-width-mobile: 100%;         /* Full width na mobile */

  /* Cover spacing */
  --cover-spacing-title-to-image: 2em;          /* Od názvu k obrázku */
  --cover-spacing-image-to-annotation: 2em;     /* Od obrázku k anotaci */
  --cover-spacing-annotation-to-chapters: 2em;  /* Od anotace k seznamu kapitol */

  /* Chapters list */
  --chapters-grid-columns: 2;                   /* Dva sloupce */
  --chapters-gap-column: 2rem;                  /* 32px - Mezera mezi sloupci */
  --chapters-gap-row: 0.25rem;                  /* 4px - Malá mezera mezi řádky */
  --chapters-left-indent: 2em;                  /* Odsazení zleva */
  --chapters-spacing-after: 2em;                /* Odstup za seznamem kapitol */


  /* ============================================
     Z-INDEX
     ============================================ */

  --z-index-content: 1;
  --z-index-navigation: 10;
  --z-index-breadcrumbs: 10;
}