:root{
  /* Brand palette (odvodené z Figmy) */
  --color-navy-900: #00071B; /* footer bottom */
  --color-navy-700: #1C3163; /* primary */
  --color-gold-500: #D6B585; /* accent */
  --color-sand-50:  #F2F2F2; /* light card bg */
  --color-gray-200: #DADADA; /* neutral */
  --color-link:     #0072A8;

  /* Semantic aliases */
  --color-primary:   var(--color-navy-700);
  --color-primary-2: var(--color-navy-900);
  --color-accent:    var(--color-gold-500);
  --color-bg:        var(--color-gray-200);
  --color-bg-2:      var(--color-sand-50);
  --color-white:     #FFFFFF;
  --color-black:     #000000;

  --color-border: rgba(0,0,0,.10);
  --color-border-strong: rgba(0,0,0,.18);
  --color-muted: rgba(0,0,0,.60);

  /* Layout */
  --container: 1440px;
  --gutter: 24px;
  --section-y: 80px;

  /* Spacing scale (používať pri skladaní sekcií) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 54px;
  --space-10: 60px;
  --space-11: 72px;
  --space-12: 88px;

  /* Typography
     Figma používa Myriad Pro (nie je free webfont).
     Ak máš licenciu, najlepšie je self-host (woff2) a prepísať --font-sans. */
  --font-sans: "myriad-pro", sans-serif;
  --font-alt: "myriad-pro", sans-serif;

  --font-body: "myriad-pro", sans-serif;
  --font-heading: "myriad-pro", sans-serif;
  --font-condensed: "myriad-pro-condensed", sans-serif;
  --font-btn: var(--font-condensed);
  --font-script: "myriad-pro", sans-serif;

  /* Font sizes (odvodené z Figmy) */
  --fs-14: 14px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-25: 25px;
  --fs-27: 27px;
  --fs-30: 30px;
  --fs-35: 35px;
  --fs-45: 45px;
  --fs-55: 55px;
  --fs-60: 60px;

  /* Line heights */
  --lh-20: 20px;
  --lh-25: 25px;
  --lh-30: 30px;
  --lh-32: 32px;
  --lh-36: 36px;
  --lh-42: 42px;
  --lh-60: 60px;
  --lh-65: 65px;

  /* Radius */
  --radius-8: 8px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-1: 0 10px 30px rgba(0,0,0,.12);
  --shadow-2: 0 18px 60px rgba(0,0,0,.18);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1: 140ms;
  --dur-2: 220ms;
}

/* Poznámka: breakpointy budú riešené priamo v CSS (bez preprocesoru),
   keďže custom properties sa v media queries nedajú spoľahlivo použiť naprieč prehliadačmi. */