/* ===========================================================================
 * SOBO disainisüsteem — ÜKS allikas kõigile lehtedele.
 *
 * Enne oli tokenite plokk kolmes failis (index.html inline, kataloog.css,
 * legal.css) ja need olid juba lahku läinud: legal.css tume teema andis
 * brändivärviks oranži #F2913F, kuigi SOBO on kuldne #BA8E49. Kolm koopiat
 * tähendab, et iga muudatus tuleb teha kolm korda ja üks jääb tegemata.
 *
 * Nüüd: see fail laaditakse KÕIGIL lehtedel ESIMESENA, ülejäänud stiilifailid
 * ainult täiendavad seda. Värvid on täpselt samad, mis varem — juurde on
 * tulnud sama värvitooni heledamad/tumedamad astmed, et kaardid, sildid ja
 * gradiendid ei peaks igal lehel oma rgba()-d välja mõtlema.
 *
 * Teema kolm olekut: :root = hele, media-päring katab "süsteemi järgi",
 * :root[data-theme] võidab mõlemas suunas.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * 1. Tokenid
 * ------------------------------------------------------------------------ */
:root {
  /* --- Bränd. Kolm esimest on täpselt vanad väärtused. --- */
  --primary: #BA8E49;
  --primary-dark: #8C6733;
  --primary-light: #F5EEE2;
  --on-primary: #FFFFFF;
  /* Sama tooni astmed — uute pindade jaoks, et mitte leiutada rgba()-sid. */
  --brand-50: #FBF7F0;
  --brand-100: #F0E4CE;
  --brand-200: #E1CDA9;
  --brand-300: #D2B67F;
  --brand-400: #C6A263;
  --brand-500: #BA8E49;
  --brand-600: #A17A3C;
  --brand-700: #8C6733;
  --brand-800: #6B4E27;
  --brand-900: #4A361B;
  /* Läbipaistvad brändikihid — töötavad ka fotol ja tumedal taustal. */
  --brand-a08: rgba(186, 142, 73, .08);
  --brand-a14: rgba(186, 142, 73, .14);
  --brand-a24: rgba(186, 142, 73, .24);
  --brand-a40: rgba(186, 142, 73, .40);

  /* --- Pinnad --- */
  --bg: #F7F8FA;
  --bg-tint: #F3F1ED;          /* sektsioonivaheldus, õrn soe toon */
  --surface: #FFFFFF;
  --surface-alt: #F1F5F9;
  --surface-sunken: #EBEFF4;
  --surface-glass: rgba(255, 255, 255, .72);
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --hairline: rgba(15, 23, 42, .07);

  /* --- Tekst --- */
  --text: #0F172A;
  --text-muted: #5F6E86;
  /* Oli #94A3B8 — valgel taustal kontrast 2.8:1, ehk alla WCAG AA piiri.
     Kohatäited ja meta-tekst peavad olema loetavad ka päikese käes. */
  --text-faint: #7A8699;

  /* --- Olekud --- */
  --success: #16A34A;
  --success-bg: #F0FDF4;
  --warning: #CA8A04;
  --warning-bg: #FEFCE8;
  --danger: #DC2626;
  --danger-bg: #FEF2F2;
  --info: #2563EB;
  --gold: #CA8A04;
  --star: #F59E0B;

  /* --- Mõõdud --- */
  --maxw: 1180px;
  --maxw-narrow: 780px;
  --gutter: 24px;
  --hdr-h: 72px;               /* päise kõrgus; JS kitsendab kerimisel */

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --pill: 999px;

  /* --- Varjud --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-md: 0 10px 30px -12px rgba(15, 23, 42, .18), 0 4px 10px -6px rgba(15, 23, 42, .10);
  --shadow-lg: 0 30px 60px -24px rgba(15, 23, 42, .28), 0 12px 24px -14px rgba(15, 23, 42, .14);
  --shadow-xl: 0 48px 90px -32px rgba(15, 23, 42, .34), 0 18px 36px -20px rgba(15, 23, 42, .16);
  --shadow-brand: 0 18px 40px -18px rgba(140, 103, 51, .55);
  --ring: 0 0 0 3px var(--brand-a24);

  /* --- Kiri --- */
  --sans: "Hanken Grotesk", "Noto Color Emoji", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", var(--sans);
  /* Sujuv skaala: väike ekraan -> suur ekraan ilma vahepealsete media-plokkideta */
  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.06rem;
  --fs-lg: clamp(1.1rem, .4vw + 1rem, 1.25rem);
  --fs-xl: clamp(1.3rem, 1vw + 1rem, 1.6rem);
  --fs-2xl: clamp(1.6rem, 2vw + 1rem, 2.1rem);
  --fs-3xl: clamp(1.95rem, 3.4vw + .6rem, 2.85rem);
  --fs-4xl: clamp(2.4rem, 5.2vw + .4rem, 4.1rem);

  /* --- Liikumine --- */
  --ease: cubic-bezier(.2, .8, .3, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .14s;
  --t: .22s;
  --t-slow: .42s;

  color-scheme: light;
}

/* Tume teema — süsteemi eelistus (kui leht ei ole selgelt heledaks pandud) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #C9A063;
    --primary-dark: #D8B57E;   /* tumedal taustal on "tume" toon HELEDAM: loetavus */
    --primary-light: #241C10;
    --on-primary: #14100A;
    --brand-a08: rgba(201, 160, 99, .10);
    --brand-a14: rgba(201, 160, 99, .16);
    --brand-a24: rgba(201, 160, 99, .28);
    --brand-a40: rgba(201, 160, 99, .44);

    --bg: #0A0C10;
    --bg-tint: #0E1116;
    --surface: #14171D;
    --surface-alt: #1C2027;
    --surface-sunken: #0F1218;
    --surface-glass: rgba(20, 23, 29, .72);
    --border: #272C36;
    --border-strong: #39404D;
    --hairline: rgba(255, 255, 255, .07);

    --text: #E6E9EE;
    --text-muted: #9AA5B1;
    --text-faint: #7E8896;

    --success: #4ADE80;
    --success-bg: #12321F;
    --warning: #E0B84C;
    --warning-bg: #2A2311;
    --danger: #F87171;
    --danger-bg: #341A1A;
    --gold: #E0B84C;
    --star: #F5A623;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-md: 0 12px 34px -14px rgba(0, 0, 0, .72);
    --shadow-lg: 0 32px 64px -26px rgba(0, 0, 0, .84);
    --shadow-xl: 0 52px 100px -34px rgba(0, 0, 0, .9);
    --shadow-brand: 0 20px 44px -20px rgba(0, 0, 0, .8);

    color-scheme: dark;
  }
}

/* Käsitsi valitud tume — võidab ka siis, kui OS on heledas */
:root[data-theme="dark"] {
  --primary: #C9A063;
  --primary-dark: #D8B57E;
  --primary-light: #241C10;
  --on-primary: #14100A;
  --brand-a08: rgba(201, 160, 99, .10);
  --brand-a14: rgba(201, 160, 99, .16);
  --brand-a24: rgba(201, 160, 99, .28);
  --brand-a40: rgba(201, 160, 99, .44);

  --bg: #0A0C10;
  --bg-tint: #0E1116;
  --surface: #14171D;
  --surface-alt: #1C2027;
  --surface-sunken: #0F1218;
  --surface-glass: rgba(20, 23, 29, .72);
  --border: #272C36;
  --border-strong: #39404D;
  --hairline: rgba(255, 255, 255, .07);

  --text: #E6E9EE;
  --text-muted: #9AA5B1;
  --text-faint: #7E8896;

  --success: #4ADE80;
  --success-bg: #12321F;
  --warning: #E0B84C;
  --warning-bg: #2A2311;
  --danger: #F87171;
  --danger-bg: #341A1A;
  --gold: #E0B84C;
  --star: #F5A623;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 12px 34px -14px rgba(0, 0, 0, .72);
  --shadow-lg: 0 32px 64px -26px rgba(0, 0, 0, .84);
  --shadow-xl: 0 52px 100px -34px rgba(0, 0, 0, .9);
  --shadow-brand: 0 20px 44px -20px rgba(0, 0, 0, .8);

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
 * 2. Alus
 * ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Ankrulink ei tohi pealkirja päise alla peita. */
  scroll-padding-top: calc(var(--hdr-h) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

/*
 * Pikad eesti/soome sõnad ei tohi jätta ritta üksikut tähte.
 *
 * `hyphens: auto` poolitab sõna sidekriipsuga (brauser kasutab lehe keele
 * sõnastikku — päis hoiab <html lang> keelevahetusega kaasas).
 * `hyphenate-limit-chars: 8 4 4` ütleb: poolita ainult vähemalt 8-tähelist
 * sõna ja jäta MÕLEMALE poole vähemalt neli tähte — nii ei saa tekkida rida,
 * mis algab või lõpeb ühe tähega. Kus poolitust ei ole (vana brauser, tundmatu
 * keel), murrab `overflow-wrap` sõna alles siis, kui ta muidu üle ääre läheks.
 */
body {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--brand-a24); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Hiireklõps ei tohi rõngast jätta, klaviatuur peab. */
:focus:not(:focus-visible) { outline: none; }

/* Kerimisriba — vaikimisi hall riba lõikas tumeda teema kohe katki. */
@supports (scrollbar-color: auto) {
  :root { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Klaviatuurikasutaja peab saama menüüst mööda hüpata. */
/* Tint/taust on pööratud (mitte kuldne): valge tekst SOBO kuldsel annab
   kontrastiks ~2.8:1 ja hüppelink on just see element, mis PEAB olema
   loetav ka halvimas olukorras. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--text); color: var(--bg);
  padding: 11px 18px; border-radius: var(--pill); font-weight: 700;
  box-shadow: var(--shadow-lg);
  transition: top var(--t) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------------------
 * 3. Paigutus
 * ------------------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxw-narrow); }

/* Sisu ei tohi lõppeda vastu jalust. Vormilehtedel (liitu, logi-sisse,
   partner) ei tulnud lõpupuhver kusagilt ja tekst istus jaluse peal.

   `:where()` on tahtlik: see nullib selektori kaalu, nii et lehe enda
   täpsem reegel (nt `.profile { padding: 0 20px 80px }`) võidab endiselt.
   Ilma selleta `main.wrap` (0,1,1) oleks `.profile` (0,1,0) üle kirjutanud
   ja profiililehed oleksid vaikselt kaotanud poole oma alumisest ruumist. */
main:where(.wrap) { padding-bottom: 40px; }

.sec { padding: clamp(56px, 8vw, 96px) 0; position: relative; }
.sec--tint { background: var(--bg-tint); }
.sec--alt { background: var(--surface-alt); }

.sec-head { max-width: 660px; margin-bottom: clamp(30px, 4vw, 48px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: var(--fs-3xl); margin-top: 14px; }
.sec-head p { color: var(--text-muted); font-size: var(--fs-lg); margin-top: 14px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary-dark);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--primary));
}
.sec-head.center .eyebrow::before { display: none; }

/* ---------------------------------------------------------------------------
 * 4. Nupud
 * ------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--pill);
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-base);
  line-height: 1.2; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t) var(--ease-out),
              background var(--t) var(--ease-out),
              border-color var(--t) var(--ease-out),
              color var(--t) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(140deg, var(--brand-500), var(--brand-800));
  color: #FFFFFF;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { box-shadow: 0 24px 48px -18px rgba(140, 103, 51, .62); }

.btn-ghost {
  background: var(--surface); color: var(--text); border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-dark); }

.btn-quiet { background: var(--surface-alt); color: var(--text); }
.btn-quiet:hover { background: var(--primary-light); color: var(--primary-dark); }

.btn-sm { padding: 9px 16px; font-size: var(--fs-sm); }
.btn-lg { padding: 16px 28px; font-size: var(--fs-md); }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------------------
 * 5. Ilmumine kerimisel
 * ------------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Peidetud ainult ekraanil — ekraanilugejale jääb alles. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
 * 6. Jalus (assets/footer.js joonistab, stiil elab siin)
 * ------------------------------------------------------------------------ */
.sftr {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: clamp(46px, 6vw, 70px) 0 28px;
  position: relative;
}
.sftr::before {
  /* Õhuke kuldne joon ülaserval — jalus loeb lehe lõpetuseks, mitte jätkuks. */
  content: ""; position: absolute; inset: -1px 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-a40), transparent);
}
.sftr__top {
  display: grid; gap: 40px;
  grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(140px, 1fr));
}
.sftr__brand {
  display: inline-block;
  font-family: var(--display); font-weight: 800; font-size: 1.6rem;
  letter-spacing: -.04em; color: var(--text); line-height: 1;
}
.sftr__brand span { color: var(--primary); }
.sftr__blurb { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 14px; max-width: 34ch; }
.sftr__mail {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--primary-dark);
}
.sftr__mail svg { width: 17px; height: 17px; }
.sftr__mail:hover { color: var(--primary); }
/* Sotsiaalmeedia: ümmargused ikoonid e-posti all. Ikoon on lucide
   joonstiilis (currentColor), seega värv tuleb lingilt. */
/* Poenupud vasakule, sotsiaal paremasse serva — üks rida, sama kõrgus.
   Rida on veergude all ja üle terve jaluse laiuse: me-veerg on liiga kitsas,
   et need kõrvuti mahuksid. Kitsal ekraanil murrab rida ja ikoonid lähevad
   nuppude alla. */
.sftr__apps {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 26px;
  padding-top: 22px; border-top: 1px solid var(--border);
}
.sftr__apps .sftr__stores { margin-top: 0; }
/* Pood, mis pole veel avatud (app-links.js paneb data-soon) — nupp viib /app
   lehele, kus on selgitus. Ära peida: äpp ON mõlemasse poodi tulemas. */
.sftr__store[data-soon] { opacity: .72; }
.sftr__socials { display: flex; gap: 10px; }
.sftr__soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted);
}
.sftr__soc svg { width: 19px; height: 19px; }
.sftr__soc:hover { color: var(--primary); border-color: var(--primary); }
.sftr__col h4 {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
  font-family: var(--sans); margin: 0 0 14px;
}
.sftr__col a {
  display: block; padding: 5px 0; color: var(--text-muted); font-size: var(--fs-sm);
  transition: color var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}
.sftr__col a:hover { color: var(--primary-dark); transform: translateX(3px); }
.sftr__stores { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.sftr__store {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-alt);
  transition: border-color var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}
.sftr__store:hover { border-color: var(--primary); transform: translateY(-2px); }
.sftr__store svg { width: 20px; height: 20px; }
.sftr__store small { display: block; font-size: .62rem; color: var(--text-faint); line-height: 1.1; }
.sftr__store b { display: block; font-size: .85rem; font-family: var(--display); line-height: 1.2; }
.sftr__bot {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border);
  color: var(--text-faint); font-size: var(--fs-xs);
}
.sftr__bot nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.sftr__bot nav a:hover { color: var(--primary-dark); }

@media (max-width: 860px) {
  .sftr__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .sftr__me { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .sftr__top { grid-template-columns: 1fr; }
  .sftr__bot nav { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
 * Ikoonid (assets/icons.js, Lucide)
 *
 * Joon pärib teksti värvi ja suurus fondi suuruse — nii istub ikoon lauses,
 * nupus ja kiibis ühtemoodi, ilma et iga kohta eraldi seadistama peaks.
 * ------------------------------------------------------------------------ */
.ico { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.18em; }
.ico path, .ico circle, .ico rect, .ico line, .ico polyline, .ico polygon, .ico ellipse {
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico [fill="currentColor"] { fill: currentColor; stroke: none; }