/* SG Billiard — ühised disainimuutujad ja tüpograafia (handle `sg-tokens`).
   Registreerib sg-category-nav; kasutavad menüü, avalehe bännerid (sg-home-banners), kategooriate ja mängude plokid.
   Iga muutuja on defineeritud AINULT siin. */

:root {
  /* Värvid */
  --sg-text: #1C1C1C;
  --sg-text-muted: #5E6166;
  --sg-text-secondary: #4A4D52;
  --sg-line: #ECE6DC;
  --sg-line-strong: #E2DCD2;
  --sg-warm: #F8F4EE;
  --sg-surface: #F4F2EE;
  --sg-accent: #E9A852;       /* brändi oranž: jooned, aktiivsed olekud */
  --sg-accent-text: #A35F0E;  /* oranž tekst valgel */
  --sg-dot-inactive: #C9C2B6;
  --sg-sale-bg: #FCE9D2;
  --sg-sale-text: #8A4E0A;
  --sg-new: #2F7D4F;
  --sg-banner-green: #EEF0EA;
  --sg-banner-green-text: #3E6B3A;

  /* Kampaaniakaardi taustad (sg_promo_bg) */
  --sg-promo-green-bg: #EEF0EA;  --sg-promo-green-fg: #3E6B3A;
  --sg-promo-warm-bg:  #FCEEDC;  --sg-promo-warm-fg:  #8A4E0A;
  --sg-promo-grey-bg:  #F4F2EE;  --sg-promo-grey-fg:  #A35F0E;

  /* Kujundus */
  --sg-font: 'Lato', sans-serif;
  --sg-max: 1280px;
  --sg-gutter: 32px;
  --sg-radius: 28px;
  --sg-radius-sm: 24px;
  --sg-shadow-hover: 0 14px 30px rgba(28, 28, 28, .08);

  /* Kirjasuurused: mobiil (≤390px) → desktop (≥1280px) */
  --sg-fs-section: clamp(32px, 26.74px + 1.348vw, 44px);
  --sg-fs-hero: clamp(28px, 22.74px + 1.348vw, 40px);
  --sg-fs-card-lg: clamp(30px, 26.49px + 0.899vw, 38px);
  --sg-fs-card: clamp(17px, 13.93px + 0.787vw, 24px);
  --sg-fs-card-sm: clamp(17px, 15.69px + 0.337vw, 20px);
  --sg-fs-lead: clamp(15px, 14.12px + 0.225vw, 17px);
  --sg-fs-body: clamp(15px, 14.56px + 0.112vw, 16px);
  --sg-fs-small: clamp(13px, 12.56px + 0.112vw, 14px);
  --sg-fs-eyebrow: clamp(11px, 10.56px + 0.112vw, 12px);
  --sg-fs-eyebrow-card: clamp(11px, 10.56px + 0.112vw, 12px);
  --sg-fs-button: clamp(14px, 13.56px + 0.112vw, 15px);

  --sg-nav-breakpoint: 1100px; /* dokumentatsiooniks; media query'des kirjuta number */
}

/* ---------------- Tüpograafia: pealkirjad õhukesed (300), paksud ainult sildid ja nupud ---------------- */

.sg-eyebrow,
.sg-eyebrow-card {
  display: block;
  font-family: var(--sg-font);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--sg-accent-text);
}
.sg-eyebrow {
  font-size: var(--sg-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 2px;
}
.sg-eyebrow-card {
  font-size: var(--sg-fs-eyebrow-card);
  font-weight: 400;
  letter-spacing: 1.6px;
}
.sg-eyebrow-card--green { color: var(--sg-promo-green-fg); }
.sg-eyebrow-card--warm  { color: var(--sg-promo-warm-fg); }
.sg-eyebrow-card--grey  { color: var(--sg-promo-grey-fg); }

.sg-h-section,
.sg-h-hero,
.sg-h-card-lg,
.sg-h-card {
  margin: 0;
  padding: 0;
  font-family: var(--sg-font);
  font-weight: 300;
  color: var(--sg-text);
  text-transform: none;
}
.sg-h-section {
  font-size: var(--sg-fs-section);
  line-height: 1.05;
  letter-spacing: clamp(-1px, -0.45px - 0.04vw, -0.6px);
}
.sg-h-hero {
  font-size: var(--sg-fs-hero);
  line-height: 1.1;
  letter-spacing: clamp(-0.8px, -0.12px - 0.06vw, -0.3px);
}
.sg-h-card-lg {
  font-size: var(--sg-fs-card-lg);
  line-height: 1.05;
  letter-spacing: clamp(-0.8px, -0.37px - 0.034vw, -0.5px);
}
.sg-h-card {
  font-size: var(--sg-fs-card);
  line-height: 1.15;
}
.sg-h-card-sm {
  font-family: var(--sg-font);
  font-size: var(--sg-fs-card-sm);
  font-weight: 400;
  line-height: 1.3;
  color: var(--sg-text);
}
.sg-lead {
  margin: 0;
  font-size: var(--sg-fs-lead);
  line-height: 1.5;
  color: var(--sg-text-muted);
}
.sg-body {
  font-size: var(--sg-fs-body);
  line-height: 1.55;
  color: var(--sg-text-secondary);
}
.sg-small {
  font-size: var(--sg-fs-small);
  line-height: 1.4;
  color: var(--sg-text-muted);
}

/* ---------------- Nupud ja lingid ---------------- */

.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  min-height: 0;
  margin: 0;
  padding: 0 24px;
  border: 1px solid var(--sg-text);
  border-radius: 999px !important; /* Flatsome: .button:not(.icon) { border-radius: 3px !important } */
  background: var(--sg-text);
  color: #fff !important;
  font-family: var(--sg-font);
  font-size: var(--sg-fs-button);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color .2s ease, color .2s ease;
}
.sg-btn--outline {
  background: transparent;
  color: var(--sg-text) !important;
  font-weight: 400;
}
.sg-btn .sg-icon {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .sg-btn:hover {
    background: #3A3A3A; /* --sg-text 8% heledamaks */
    color: #fff !important;
  }
  .sg-btn--outline:hover {
    background: rgba(28, 28, 28, .08);
    color: var(--sg-text) !important;
  }
}
.sg-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 400;
  color: var(--sg-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sg-link-arrow:hover {
  color: var(--sg-accent-text);
}

@media (max-width: 767px) {
  .sg-btn {
    height: 46px;
  }
}