/* SG Billiard — disainimuutujad ja tekstiklassid (handle `sgb-tokens`).
   ÜKSKÕIK MILLINE värv, kirjasuurus, raadius või vari CSS-is peab tulema siit. Uus väärtus → lisa siia, mitte faili. */

:root {
  /* ---- Värvid ---- */
  --sg-text: #1C1C1C;            /* põhitekst, mustad nupud */
  --sg-text-secondary: #4A4D52;  /* sisutekst, ülemise riba lingid */
  --sg-text-muted: #5E6166;      /* abitekst, arvud */
  --sg-text-faint: #8A8D92;      /* eraldajad, keelatud olek */
  --sg-black: #000;              /* musta nupu hover */
  --sg-white: #fff;

  --sg-line: #ECE6DC;            /* jooned, raamid */
  --sg-line-strong: #E2DCD2;     /* väljade ja kiipide raam */
  --sg-line-dark: #D9D1C4;       /* keelevaliku nupu raam */
  --sg-warm: #F8F4EE;            /* beež taust (ribad, kaardid, aktiivne) */
  --sg-surface: #F4F2EE;         /* hall-beež taust (otsing, väljad) */
  --sg-image-bg: #F8F9FA;        /* tootepiltide taust (mix-blend-mode: multiply) */

  --sg-accent: #E9A852;          /* brändi oranž: ostukorvi nupp, jooned, aktiivsed olekud */
  --sg-accent-hover: #DB9A43;
  --sg-accent-text: #A35F0E;     /* oranž tekst valgel */
  --sg-dot-inactive: #C9C2B6;

  --sg-sale-bg: #FCE9D2;
  --sg-sale-text: #8A4E0A;
  --sg-new: #2F7D4F;             /* "Uus", laos, "Lisatud ostukorvi" */
  --sg-green-text: #23613C;      /* "Uus" märgi tekst */
  --sg-green-bg: #E5F0E8;        /* "Uus" märgi taust */
  --sg-amber-text: var(--sg-sale-text);       /* "Järeltellimisel" tekst */
  --sg-amber-bg: var(--sg-promo-warm-bg);     /* "Järeltellimisel" taust */
  --sg-error: #C0392B;
  --sg-banner-green: #EEF0EA;
  --sg-banner-green-text: #3E6B3A;

  /* Postituse sisu: nõuande kast, numberloendi ring (sg-postituse-sisu-spec.md) */
  --sg-tip-bg: var(--sg-promo-warm-bg);
  --sg-tip-border: #F3DDBF;
  --sg-tip-text: var(--sg-sale-text);
  --sg-meta-dot: #B9B2A6;        /* postituse meta rea punkt */

  /* Kampaaniakaardid (sg-home-banners: 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;

  /* ---- Paigutus ---- */
  --sg-font: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sg-max: 1280px;              /* rea laius koos külgvahedega */
  --sg-gutter: 32px;             /* külgvahe (mobiilis 16px) */
  --sg-sidebar: 264px;           /* poe/toote külgriba */
  --sg-content: 760px;           /* tekstilehtede lugemislaius */

  /* ---- Raadiused ---- */
  --sg-radius: 28px;             /* suured kaardid (avaleht) */
  --sg-radius-sm: 24px;          /* kaardid, galerii */
  --sg-radius-md: 20px;          /* paneelid, minikorv, usaldusriba */
  --sg-radius-s: 14px;           /* väikesed kaardid, rippmenüüd */
  --sg-radius-input: 12px;       /* vormiväljad */
  --sg-radius-xs: 10px;          /* pisipildid, menüüread */
  --sg-radius-pill: 999px;       /* nupud, kiibid, väljad */

  /* ---- Varjud ---- */
  --sg-shadow-hover: 0 14px 30px rgba(28, 28, 28, .08);
  --sg-shadow-pop: 0 20px 48px rgba(28, 28, 28, .14);  /* rippmenüüd */
  --sg-overlay: rgba(28, 28, 28, .5);                  /* sahtli/dialoogi taust */
  --sg-tint: rgba(28, 28, 28, .06);                    /* kontuurnupu hover */
  --sg-shadow-sm: 0 1px 3px rgba(28, 28, 28, .12);     /* lüliti aktiivne pool */
  --sg-shadow-up: 0 -8px 24px rgba(28, 28, 28, .06);   /* mobiili alumine riba */
  --sg-shadow-panel: -20px 0 48px rgba(28, 28, 28, .18); /* paremalt avanev paneel (Küsi pakkumist) */

  /* ---- Kirjasuurused ----
     Fikseeritud skaala (väikesed tekstid) + sujuvad pealkirjad (mobiil ≤390px → desktop ≥1280px). */
  --sg-fs-3xs: 10px;   /* kategooria kaardil (ruudustik) */
  --sg-fs-2xs: 11px;   /* sildid (UUS, SAALIKIID) */
  --sg-fs-xs: 12px;    /* arvud, märkused */
  --sg-fs-sm: 13px;    /* ülemine riba, leivapuru, abitekst */
  --sg-fs-base: 14px;  /* nupud, kiibid, vormid */
  --sg-fs-md: 15px;    /* otsing, kaardi nimi */
  --sg-fs-lg: 16px;    /* sisutekst */
  --sg-fs-xl: 18px;    /* rea pealkiri, hind */
  --sg-fs-2xl: 24px;   /* summad */
  --sg-fs-sum: 22px;          /* minikorvi vahesumma */
  --sg-fs-total: 28px;        /* "Kokku" ostukorvis/kassas */
  --sg-fs-price: 40px;        /* tootelehe hind */
  --sg-fs-price-m: 34px;      /* tootelehe hind tahvlis/mobiilis */
  --sg-fs-price-range: 30px;  /* hinnavahemik enne variatsiooni valikut */

  --sg-fs-page: clamp(28px, 23.6px + 1.12vw, 36px);    /* lehe pealkiri (H1) */
  --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);

  /* Postituse sisu (.sg-prose, content.css): mobiil 390px → desktop 1280px */
  --sg-fs-post-h1: clamp(34px, 27.87px + 1.573vw, 48px);
  --sg-fs-post-h2: clamp(26px, 23.37px + 0.674vw, 32px);
  --sg-fs-post-h3: clamp(20px, 18.69px + 0.337vw, 23px);
  --sg-fs-post-h4: clamp(17px, 16.56px + 0.112vw, 18px);
  --sg-fs-post-lead: clamp(19px, 17.69px + 0.337vw, 22px);
  --sg-fs-post-quote: clamp(21px, 19.69px + 0.337vw, 24px);
  --sg-fs-post: clamp(17px, 16.56px + 0.112vw, 18px);

  --sg-nav-breakpoint: 1100px; /* dokumentatsiooniks; media query'des kirjuta number. Teised: 849px (mobiil), 640px (väike) */
}
@media (max-width: 849px) {
  :root {
    --sg-gutter: 16px;
  }
}

/* ---------------- 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-page,
.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-page {
  font-size: var(--sg-fs-page);
  line-height: 1.1;
  letter-spacing: -0.6px;
}
.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;
  margin: 0;
  padding: 0 24px;
  border: 1px solid var(--sg-text);
  border-radius: var(--sg-radius-pill);
  background: var(--sg-text);
  color: var(--sg-white);
  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;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.sg-btn--outline {
  background: var(--sg-white);
  color: var(--sg-text);
  font-weight: 400;
}
.sg-btn--sm {
  height: 46px;
  padding: 0 20px;
  font-size: var(--sg-fs-base);
}
.sg-btn .sg-icon {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .sg-btn:hover {
    background: var(--sg-black);
    color: var(--sg-white);
  }
  .sg-btn--outline:hover {
    background: var(--sg-tint);
    color: var(--sg-text);
  }
}
.sg-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sg-fs-md);
  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;
  }
}