/* ============================================================
   machasen — design tokens
   Zdroj: BrandBook, vydání 26. 8. 2026 (20 stran)
   Tyto hodnoty se NEMĚNÍ. Nové barvy se nepřidávají.
   ============================================================ */

:root{

  /* ---- JÁDRO — nikdy se nemění ------------------------------ */
  --ms-teal:        #008678;
  --ms-teal-dark:   #006E62;   /* jen hover/active stav teal ploch */
  --ms-sand:        #F5F3EF;
  --ms-paper:       #FBFAF8;
  --ms-white:       #FFFFFF;
  --ms-ink:         #1A1A1A;
  --ms-key-gray:    #6B6862;   /* popisky sekcí, nepovinné údaje */
  --ms-rule:        #DDD9D2;   /* vlásové oddělovací linky */

  /* odvozené neutrály — jen průhlednost ink, žádné nové barvy */
  --ms-ink-60:      rgba(26,26,26,.62);
  --ms-ink-40:      rgba(26,26,26,.42);
  --ms-line:        rgba(26,26,26,.15);
  --ms-line-strong: rgba(26,26,26,.30);

  /* na teal ploše */
  --ms-on-teal:       #F5F3EF;
  --ms-on-teal-60:    rgba(245,242,239,.72);
  --ms-line-on-teal:  rgba(245,242,239,.26);

  /* odvozené teal tinty — jediný zdroj průhledného tealu, žádné volné color-mix */
  --ms-teal-06:  color-mix(in srgb, var(--ms-teal) 6%, transparent);
  --ms-teal-09:  color-mix(in srgb, var(--ms-teal) 9%, transparent);
  --ms-teal-14:  color-mix(in srgb, var(--ms-teal) 14%, transparent);

  /* ---- PRODUKTOVÁ PALETA — akcenty, jen na obalech a v dekoraci
     Světlé patro: plocha .82 / .055, text = --ms-ink
     Tmavé patro:  plocha .40 / .105, text = --ms-sand
     Barva vždy něco znamená (příchuť / řada). Nikdy jen dekorace. */
  --ms-ube:        #C6BEE5;   /* světlé patro */
  --ms-sakura:     #E6B7B5;   /* světlé patro */
  --ms-dragon:     #843C5B;   /* tmavé patro */
  --ms-hibiscus:   #893D39;   /* tmavé patro */
  --ms-spirulina:  #225B90;   /* tmavé patro */
  --ms-pandan:     #44631C;   /* tmavé patro */
  --ms-hojicha:    #834510;   /* tmavé patro */
  --ms-sesame:     #2C2D35;   /* tmavé patro */
  --ms-hojicha-lt: #E1BBA3;   /* světlé patro */
  --ms-sencha:     #ACCFB2;   /* světlé patro */
  --ms-gyokuro:    #226837;   /* tmavé patro */
  --ms-hoji-gyo:   #5C5C00;   /* tmavé patro */
  --ms-rooibos:    #893C3F;   /* tmavé patro, pozor: blízko hibiscus */

  /* ---- TYPOGRAFIE — tři hlasy -------------------------------
     Hlas 1 = logotyp (pouze značka, NIKDY sazba)
     Hlas 2 = Hanken Grotesk (lic. alt.: Suisse Int'l, ABC Diatype)
     Hlas 3 = Space Mono — data, šarže, ceny, jednotky, kóty, kódy */
  --ms-font:      "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ms-font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* řezy — 800 SE NEPOUŽÍVÁ */
  --ms-w-text:      400;  /* běžný text */
  --ms-w-emphasis:  500;  /* zvýraznění */
  --ms-w-title:     600;  /* titulky */
  --ms-w-data:      700;  /* jména a čísla */

  /* škála — brand book: H1 34–36 pt · H2 20–22 pt · text 13–14/1,6 */
  --ms-h1:      clamp(30px, 4vw, 46px);
  --ms-h1-lh:   1.06;
  --ms-h1-ls:   -.015em;      /* titulky mají záporný prostrk */
  --ms-h2:      clamp(20px, 2.3vw, 29px);
  --ms-h2-lh:   1.15;
  --ms-h2-ls:   -.015em;
  --ms-text:    14px;
  --ms-text-lh: 1.6;
  --ms-small:   12.5px;

  /* label — verzálky, prostrk .18em, vždy mono */
  --ms-label:     10px;
  --ms-label-ls:  .18em;

  /* ---- PROSTOR ---------------------------------------------- */
  --ms-pad: clamp(16px, 4vw, 64px);   /* okrajový odsazení plochy */
  --ms-s1: 4px;  --ms-s2: 8px;  --ms-s3: 12px; --ms-s4: 16px;
  --ms-s5: 24px; --ms-s6: 40px; --ms-s7: 64px; --ms-s8: 96px;

  --ms-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   PRAVIDLO 1 — Kulaté je jen písmo. Plochy a tlačítka ostré.
   Jediná výjimka jsou fyzicky kulaté věci (víčko, pečeť,
   razítko, pin, zaoblený roh vizitky) — ty v digitálu nejsou.
   ============================================================ */
*, *::before, *::after { border-radius: 0; }

/* ============================================================
   Základní sazba
   ============================================================ */
body{
  margin: 0;
  background: var(--ms-sand);
  color: var(--ms-ink);
  font-family: var(--ms-font);
  font-weight: var(--ms-w-text);
  font-size: var(--ms-text);
  line-height: var(--ms-text-lh);
  -webkit-font-smoothing: antialiased;
}

/* sazba na prapor vlevo — na střed jen víčko, pečeť a rub vizitky */
h1, h2, h3, h4, p, ul, ol, td, th { text-align: left; }

.ms-h1{ font-size: var(--ms-h1); font-weight: var(--ms-w-title);
        letter-spacing: var(--ms-h1-ls); line-height: var(--ms-h1-lh); }
.ms-h2{ font-size: var(--ms-h2); font-weight: var(--ms-w-title);
        letter-spacing: var(--ms-h2-ls); line-height: var(--ms-h2-lh); }
.ms-text{ font-size: var(--ms-text); line-height: var(--ms-text-lh); color: var(--ms-ink-60); }

/* HLAS 3 — všechna data v mono */
.ms-mono,
.ms-price,
.ms-batch,
.ms-unit,
.ms-code{
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums;
}
.ms-price{ font-weight: var(--ms-w-data); }

.ms-label{
  font-family: var(--ms-font-mono);
  font-size: var(--ms-label);
  font-weight: 400;
  letter-spacing: var(--ms-label-ls);
  text-transform: uppercase;
  color: var(--ms-ink-60);
}

/* ============================================================
   Plochy — v digitálu se dělí ROVNOU LINKOU.
   Vlna je tvarový prvek obalů, na webu se nepoužívá.
   ============================================================ */
.ms-surface-sand  { background: var(--ms-sand);  color: var(--ms-ink); }
.ms-surface-paper { background: var(--ms-paper); color: var(--ms-ink); border-block: 1px solid var(--ms-line); }
.ms-surface-teal  { background: var(--ms-teal);  color: var(--ms-on-teal); }
.ms-surface-teal .ms-text  { color: var(--ms-on-teal-60); }
.ms-surface-teal .ms-label { color: var(--ms-on-teal-60); }

/* tlačítko — ostré, plné teal */
.ms-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ms-teal); color: var(--ms-on-teal);
  font-family: var(--ms-font); font-weight: var(--ms-w-title); font-size: 14px;
  padding: 16px 24px; border: 0; cursor: pointer;
  transition: background .3s var(--ms-ease);
}
.ms-btn:hover{ background: var(--ms-teal-dark); }

.ms-btn-ghost{
  background: transparent; color: var(--ms-ink);
  border: 1px solid var(--ms-line-strong);
  transition: border-color .3s var(--ms-ease), background .3s var(--ms-ease);
}
.ms-btn-ghost:hover{ border-color: var(--ms-teal); background: var(--ms-paper); }

:focus-visible{ outline: 2px solid var(--ms-teal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition-duration: .01ms !important; }
}