/* Sdílený základ všech konceptů vizitky.
   Barvy přebírají tokeny z fitcellu (src/index.css), aby web a aplikace působily jako jedna rodina.
   MK monogram: M = --ink, noha K = --brand (fialová). */


:root{
  color-scheme: dark;
  --bg:#26272c;
  --bg-deep:#1d1e22;
  --surface:#31333a;
  --surface-2:#3c3e46;
  --line:#474a53;
  --ink:#f4f4f6;
  --muted:#b6b9c2;
  --faint:#8d919b;
  --accent:#4fd0d9;          /* výplně (tlačítka, vybrané volby) */
  --accent-line:#4fd0d9;     /* čáry a rámečky */
  --accent-ink:#4fd0d9;      /* tyrkysový text */
  --on-accent:#0b1a1c;
  --brand:#9b83f0;
  --brand-soft:#b8a3fb;
  --ok:#45d483;
  --radius:14px;
  --radius-lg:22px;
  --font:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease-snappy:cubic-bezier(.2,.9,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f2f2f6;
  --bg-deep:#e7e7ed;
  --surface:#ffffff;
  --surface-2:#f6f6f9;
  --line:#d8d9e0;
  --ink:#1b1c21;
  --muted:#545762;
  --faint:#6d717b;
  /* stejná modrá jako v tmavém režimu; na bílém pozadí jsou čáry a text o kus sytější kvůli kontrastu */
  --accent:#4fd0d9;
  --accent-line:#1a98bd;
  --accent-ink:#0f7ea3;
  --on-accent:#0b1a1c;
  --brand:#6b4fd6;
  --brand-soft:#7f63e6;
  --ok:#12804a;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100svh;
  font-family:var(--font);font-size:17px;line-height:1.55;font-weight:400;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
img{display:block;max-width:100%}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-line);outline-offset:3px;border-radius:6px}

/* ---------- MK monogram ---------- */
.mk{display:inline-block;width:44px;height:44px}
.mk svg{width:100%;height:100%;display:block}
.mk .mk-m{fill:var(--ink)}
.mk .mk-k{fill:var(--brand)}

/* ---------- typografie ---------- */
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-soft);font-weight:500}
:root[data-theme="light"] .eyebrow{color:var(--brand)}
.muted{color:var(--muted)}

/* ---------- tlačítka a kontakty ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 20px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  text-decoration:none;font-weight:500;cursor:pointer;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
  transition:transform .18s var(--ease-snappy),background-color .2s,border-color .2s;
}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);border-color:transparent;color:var(--on-accent);font-weight:600}
@media (hover:hover){
  .btn:hover{border-color:var(--faint)}
  .btn-primary:hover{filter:brightness(1.06)}
}
:root[data-theme="light"] .btn-primary{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent-line) 45%,transparent)}

.contacts{display:flex;flex-wrap:wrap;gap:10px}
.contacts .icon-only{width:48px;padding:0}
.contacts .icon-only span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- formulář ---------- */
.form{display:grid;gap:12px}
.field{display:grid;gap:6px}
.field label{font-size:14px;color:var(--muted)}
.field input,.field textarea{
  width:100%;padding:13px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg-deep);
  font-size:16px;outline:none;resize:vertical;
  transition:border-color .2s,box-shadow .2s;
}
:root[data-theme="light"] .field input,:root[data-theme="light"] .field textarea{background:var(--surface)}
.field textarea{min-height:110px}
.field input:focus,.field textarea:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 28%,transparent)}
.form .note{font-size:13px;color:var(--faint);margin:0}
.form .ok{display:none;color:var(--ok);font-weight:500;margin:0}
.form.sent .ok{display:block}
.form .hp{position:absolute;left:-9999px}

/* ---------- přepínače jazyka a motivu ---------- */
.toolbar{display:flex;align-items:center;gap:4px}
.toolbar button{
  min-width:38px;height:34px;padding:0 8px;border-radius:10px;border:0;background:transparent;
  color:var(--muted);font-size:14px;cursor:pointer;touch-action:manipulation;
}
.toolbar button[aria-pressed="true"]{color:var(--ink);background:color-mix(in oklab,var(--ink) 10%,transparent)}
.toolbar .sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.toolbar svg{width:16px;height:16px;vertical-align:-3px}

/* ---------- fitcell odkaz ---------- */
.fitcell-link{display:inline-flex;align-items:center;gap:10px;color:var(--muted);text-decoration:none;font-size:15px}
.fitcell-link b{color:var(--ink);font-weight:600}
.fitcell-link .cell{
  position:relative;display:inline-flex;align-items:center;
  height:24px;padding:0 6px;border:1.5px solid var(--accent-line);border-radius:3px;
  font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
}
.fitcell-link .cell::after{content:"";position:absolute;right:-4px;bottom:-4px;width:6px;height:6px;background:var(--brand);border-radius:1px;box-shadow:0 0 0 1.5px var(--bg)}
.fitcell-link .cell i{font-style:normal;color:var(--accent-ink)}
@media (hover:hover){.fitcell-link:hover{color:var(--ink)}}

.legal{font-size:13px;color:var(--faint)}

/* (štítek z konceptů, na produkčním webu se nepoužívá) */
.concept-tag{
  position:fixed;left:14px;bottom:14px;z-index:50;
  font-size:12px;color:var(--faint);background:color-mix(in oklab,var(--bg) 80%,transparent);
  padding:6px 10px;border-radius:8px;border:1px solid var(--line);text-decoration:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

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