/*
 * =============================================================
 *  VARIABLES — Human Design Členská sekce
 *  Zdieľané CSS premenné naprieč celým webom.
 *  Zmena tu = zmena všade.
 * =============================================================
 */

:root {

  /* ── Farby ── */
  --color-purple:        #774fd3;
  --color-purple-dark:   #5e3dab;
  --color-purple-light:  #ede8fa;

  --color-yellow:        #ffbb31;
  --color-yellow-hover:  #e0a020;

  --color-gray:          #575555;
  --color-gray-light:    #f0f0f0;
  --color-gray-bg:       #f4f4f4;

  --color-green:         #00674e;
  --color-green-dark:    #004d3a;

  --color-white:         #ffffff;
  --color-text:          #111111;
  --color-border:        #dddddd;
  --color-shadow:        rgba(0, 0, 0, 0.13);

  /* ── Typografia ── */
  --font-base:           'Source Sans 3', sans-serif;
  --font-size-base:      16px;
  --font-size-sm:        13px;
  --font-size-md:        15px;
  --font-size-lg:        18px;
  --font-size-xl:        20px;
  --font-weight-normal:  400;
  --font-weight-semi:    600;
  --font-weight-bold:    700;
  --line-height-base:    1.5;
  --line-height-heading: 1.3;

  /* ── Spacing ── */
  --space-xs:   6px;
  --space-sm:   12px;
  --space-md:   20px;
  --space-lg:   32px;
  --space-xl:   48px;

  /* ── Zaoblenie ── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-pill: 9999px;

  /* ── Tiene ── */
  --shadow-card: 0 2px 18px var(--color-shadow);

  /* ── Šírky ── */
  --max-width-page:  970px;
  --max-width-card:  420px;
}