@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ---- Značka: navy (primárna) ---- */
  --navy-900: #1a1a2e;
  --navy-800: #16213e;
  --navy-700: #0f3460; /* PRIMÁRNA navy */
  --navy-600: #1a4a82;
  --navy-100: #eef2fb;
  --navy-050: #f7f8fc;

  /* ---- Pôvodná zelená (akcent) ---- */
  --green-500: #77b748;
  --green-600: #649b3c;

  /* ---- Maskot ---- */
  --moth-400: #f0a868;
  --moth-500: #f16945;
  --moth-600: #d8542f;

  /* ---- Info / odkaz ---- */
  --blue-400: #55acee;

  /* ---- Neutrály ---- */
  --ink-900: #222222;
  --ink-800: #414141;
  --ink-700: #484848;
  --ink-600: #666666;
  --ink-400: #888888;
  --ink-300: #999999;
  --line-300: #e8eaf0;
  --line-200: #e4e7f0;
  --line-100: #f3f3f3;
  --white: #ffffff;

  /* ---- Sémantické aliasy ---- */
  --brand: var(--navy-700);
  --brand-hover: var(--navy-600);
  --brand-ink: var(--navy-900);
  --accent: var(--moth-500);
  --accent-soft: var(--moth-400);

  --text-heading: var(--navy-900);
  --text-body: var(--ink-600);
  --text-strong: var(--ink-800);
  --text-muted: var(--ink-400);
  --text-meta: var(--ink-300);
  --text-link: var(--navy-700);
  --text-on-brand: var(--white);

  --surface-page: var(--white);
  --surface-tint: var(--navy-050);
  --surface-card: var(--white);
  --surface-chip: var(--navy-100);

  --border-card: var(--line-300);
  --border-divider: var(--line-200);

  --gradient-hero: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

  /* ---- Typografia ---- */
  --font-sans: 'Noto Sans', Arial, Helvetica, sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --text-hero: 52px;
  --text-h1: 48px;
  --text-h2: 36px;
  --text-section: 24px;
  --text-h3: 24px;
  --text-h4: 18px;
  --text-lg: 20px;
  --text-md: 16px;
  --text-base: 14px;
  --text-sm: 13px;
  --text-xs: 12px;

  --leading-tight: 1.1;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-body: 1.65;

  --tracking-hero: -1px;
  --tracking-label: 0.5px;

  /* ---- Rozostupy / rádiusy / tiene ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 70px;

  --container-max: 1170px;
  --container-pad: 16px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-card-hover: 0 4px 18px rgba(15, 52, 96, 0.10);
  --shadow-cover: 0 5px 15px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 8px 28px rgba(15, 52, 96, 0.16);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s var(--ease-standard);
  --transition: 0.2s var(--ease-standard);
}

/* ---- Voliteľné pripravené triedy ---- */
.km-section { padding: var(--space-8) 0; }
.km-section--tint { background: var(--surface-tint); }
.km-section-title {
  font-size: var(--text-section);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  border-left: 4px solid var(--brand);
  padding-left: var(--space-3);
  margin: 0 0 var(--space-6);
  line-height: var(--leading-snug);
}
.km-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: var(--transition);
}
.km-card:hover { box-shadow: var(--shadow-card-hover); }
.km-hero { background: var(--gradient-hero); padding: var(--space-9) 0 60px; }
.km-hero h1 {
  font-size: var(--text-hero);
  font-weight: var(--weight-black);
  color: var(--white);
  letter-spacing: var(--tracking-hero);
  line-height: var(--leading-tight);
}
.km-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--weight-semibold); font-size: var(--text-base);
  padding: 10px 20px; border-radius: var(--radius-md);
  background: var(--brand); color: var(--text-on-brand);
  border: 1px solid var(--brand); text-decoration: none;
  transition: var(--transition);
}
.km-btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.km-btn--outline { background: var(--white); color: var(--brand); }