/* ============================================================
   ORDO · TUMAKI-Design
   Marken-Tokens aus assets.tumaki.de/colors_and_type.css (v1.0).
   Self-hosted Fonts (kein Third-Party). Klassennamen wie Original.
   ============================================================ */

/* ── Self-hosted Web fonts ─────────────────────────────────── */
@font-face{font-family:"Inter";src:url("/static/fonts/inter.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("/static/fonts/geist.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/static/fonts/geist-mono.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/static/fonts/instrument-serif.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* type */
  --tk-font-body:"Inter",system-ui,sans-serif;
  --tk-font-display:"Geist","Inter",system-ui,sans-serif;
  --tk-font-mono:"Geist Mono",ui-monospace,monospace;
  --tk-font-serif:"Instrument Serif",Georgia,serif;
  /* ink / surfaces */
  --tk-ink:#0A1430; --tk-ink-2:#1A2447; --tk-ink-3:#36406A;
  --tk-paper:#FFFFFF; --tk-paper-warm:#FAF7F2; --tk-light:#E9ECF4;
  --tk-mute:#6B6F76; --tk-mute-2:#9AA0AB;
  --tk-line:#E6E6E2; --tk-line-strong:#C8C8C0;
  /* brand */
  --tk-red:#8B2635; --tk-red-ink:#6B1A26; --tk-ring-red:0 0 0 4px rgba(139,38,53,.20);
  --tk-sight:#1E4FD9; --tk-ring-sight:0 0 0 4px rgba(30,79,217,.18);
  --tk-ok:#178F4E; --tk-ok-bg:#E7F4EC; --tk-warn:#C97A00; --tk-warn-bg:#FCF1DE;
  /* radii / shadow / motion */
  --tk-r-sm:4px; --tk-r-md:8px; --tk-r-lg:12px; --tk-r-xl:20px; --tk-r-pill:999px;
  --tk-shadow-xs:0 1px 2px rgba(10,20,48,.06);
  --tk-shadow-sm:0 2px 6px rgba(10,20,48,.06),0 1px 2px rgba(10,20,48,.04);
  --tk-shadow-md:0 8px 20px rgba(10,20,48,.08),0 2px 4px rgba(10,20,48,.04);
  --tk-shadow-lg:0 24px 48px rgba(10,20,48,.14),0 4px 12px rgba(10,20,48,.06);
  --tk-dur:200ms; --tk-ease:cubic-bezier(.22,.61,.36,1);

  --primary-color:var(--tk-paper-warm);
  --secondary-color:var(--tk-light);
}

*{margin:0;box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  background-color:var(--tk-paper-warm);
  color:var(--tk-ink);
  font-family:var(--tk-font-body);
  font-weight:400;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

button,input,label,select,textarea{font-family:inherit;color:inherit}

*[hx-swap]{animation:animate-in var(--tk-dur) var(--tk-ease)}
@keyframes animate-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}

a{color:inherit;text-decoration:none}

/* ── Header ────────────────────────────────────────────────── */
.header{
  top:0;position:sticky;z-index:10;width:100%;
  padding:.85rem 1.25rem;
  display:flex;align-items:center;gap:.75rem;
  background:rgba(250,247,242,.85);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--tk-line);
  box-shadow:var(--tk-shadow-sm);
}
.header__logo{display:flex;align-items:center;gap:.6rem;font-weight:700}
.header__logo img{height:26px;width:auto;display:block}
.header__logo .tag{
  font-family:var(--tk-font-mono);font-size:.8rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tk-mute);padding-top:2px;
}

/* ── Layout ────────────────────────────────────────────────── */
.main{min-height:calc(100vh - 60px);padding:1.5rem;margin-bottom:2rem}
.two-cols{gap:2.5rem;display:grid;grid-template-columns:1fr 1fr;align-items:center}
@media (max-width:1000px){
  .two-cols{grid-template-columns:1fr}
  .two-cols>.hide-on-small{display:none}
}
.center{display:flex;align-items:center;justify-content:center}
.grid{display:grid;grid-template-columns:1fr}
.gap-lg{gap:1.5rem}.gap-md{gap:1rem}.gap-sm{gap:.5rem}
.flex{display:flex}.strech{flex:1}
.w-200{max-width:100%;width:200px}.w-500{max-width:100%;width:500px}
.w-800{max-width:100%;width:800px}.w-full{width:100%}.w-fit{width:fit-content}
.h-full{height:100%}

/* ── Type ──────────────────────────────────────────────────── */
.text-lg{font-family:var(--tk-font-display);font-size:clamp(2.25rem,3.5vw + 1rem,3.25rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;color:var(--tk-ink)}
.text-md{font-family:var(--tk-font-display);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--tk-ink)}
.text-sm{font-size:1rem}
.bold{font-weight:600}
.text-center{text-align:center}
.align-left{text-align:left}

/* ── Inputs ────────────────────────────────────────────────── */
.input-text{
  background:var(--tk-paper);color:var(--tk-ink);
  border:1px solid var(--tk-line-strong);border-radius:var(--tk-r-md);
  font-size:1.05rem;padding:.6rem .85rem;
  transition:border-color var(--tk-dur) var(--tk-ease),box-shadow var(--tk-dur) var(--tk-ease);
}
.input-text::placeholder{color:var(--tk-mute-2);opacity:1}
.input-text:focus{outline:none;border-color:var(--tk-sight);box-shadow:var(--tk-ring-sight)}

/* ── Buttons ───────────────────────────────────────────────── */
.button{
  background:var(--tk-red);color:#fff;
  border:1px solid var(--tk-red);border-radius:var(--tk-r-lg);
  font-size:1.05rem;font-weight:600;padding:.6rem 1.1rem;cursor:pointer;
  box-shadow:var(--tk-shadow-sm);
  transition:background var(--tk-dur) var(--tk-ease),transform var(--tk-dur) var(--tk-ease),box-shadow var(--tk-dur) var(--tk-ease);
}
.button:hover{background:var(--tk-red-ink);border-color:var(--tk-red-ink)}
.button:focus-visible{outline:none;box-shadow:var(--tk-ring-red)}
.button:active{transform:translateY(1px);box-shadow:var(--tk-shadow-xs)}
.button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
/* secondary / ghost: "ADD OPTION" */
#addOption{
  background:transparent;color:var(--tk-red);border:1px solid var(--tk-line-strong);
  box-shadow:none;
}
#addOption:hover{background:var(--tk-paper);border-color:var(--tk-red);color:var(--tk-red-ink)}

/* ── Cards / surfaces ──────────────────────────────────────── */
.card{
  border:1px solid var(--tk-line);border-radius:var(--tk-r-xl);
  padding:1.25rem;background:var(--tk-paper);box-shadow:var(--tk-shadow-md);
}
.card--secondary{background:var(--tk-paper-warm)}
.alert{
  background:var(--tk-ok-bg);color:var(--tk-ok);
  padding:.5rem .85rem;width:fit-content;
  border:1px solid color-mix(in srgb,var(--tk-ok) 30%,transparent);
  border-radius:var(--tk-r-md);font-weight:600;
}
.boxed{padding:.4rem .85rem;border:1px solid var(--tk-line-strong);border-radius:var(--tk-r-md)}

/* ── Stats ─────────────────────────────────────────────────── */
.stat{display:grid;grid-template-columns:1fr}
.stat__num{font-family:var(--tk-font-display);font-size:5.5rem;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--tk-ink)}
.stat__desc{font-size:1.25rem;color:var(--tk-mute)}

/* ── Code / room codes ─────────────────────────────────────── */
.code{
  padding:.5rem .85rem;border:1px solid var(--tk-line);border-radius:var(--tk-r-md);
  background:var(--tk-paper-warm);font-family:var(--tk-font-mono);
  font-size:.95rem;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
}

/* ── Sortable / ranked list ────────────────────────────────── */
.sortable-active{background:var(--tk-light);opacity:.9;border-radius:var(--tk-r-md)}

.big-small{display:grid;grid-template-columns:80% 20%}

canvas.card{padding:1rem}