/* ============================================================
   wld-ui.css — shared design tokens + components
   wirlernendeutsch.berlin Trainer-App
   Added 2026-06-10 (UX review WS3). Linked by every page BEFORE
   its inline <style>, so page-local rules can still override
   during the transition.
   ============================================================ */

:root {
  /* --- Core palette (canonical names) --- */
  --bg:      #f1ede3;
  --paper:   #e7e2d4;
  --paper-dk:#ded6c0;
  --card:    #ffffff;
  --ink:     #0e0e0d;
  --ink-soft:#2a2a28;
  --mute:    #6b6a63;
  --accent:  #3546b4;
  --yellow:  #e9b928;
  --orange:  #e07b1a;
  --orange-bg:#fbe6d4;

  /* --- State colors (right/wrong ONLY — never reuse for genus) --- */
  --ok:      #4d7a2e;
  --ok-bg:   #eef2e2;
  --err:     #c23a2b;
  --err-bg:  #f7e8e4;

  /* --- Genus palette (D5) — distinct from all state colors --- */
  --der:     #0e7490;  --der-bg: #e2f1f5;
  --die:     #b13d77;  --die-bg: #f7e6ee;
  --das:     #3546b4;  --das-bg: #e8eaf5;
  --plu:     #6b4f9e;  --plu-bg: #efebf5;
  --kein:    #6b6a63;

  /* --- Type --- */
  --display: "Archivo Black","Helvetica Neue",Arial,sans-serif;
  --body:    "Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:    "JetBrains Mono",ui-monospace,Menlo,monospace;

  /* Type floor (WS3.2): nothing below ~11px */
  --fs-micro: .72rem;   /* was .6–.68rem in places */
  --fs-small: .78rem;
  --fs-body:  .92rem;

  /* --- Legacy aliases so existing --wld-* rules keep working --- */
  --wld-bg: var(--bg); --wld-paper: var(--paper); --wld-ink: var(--ink);
  --wld-ink-soft: var(--ink-soft); --wld-ink-mute: var(--mute);
  --wld-accent: var(--accent); --wld-yellow: var(--yellow);
  --wld-orange: var(--orange); --wld-stamp: var(--err);
  --wld-green: var(--ok); --wld-cream-lt: var(--bg);
  --wld-display: var(--display); --wld-body: var(--body); --wld-mono: var(--mono);
}

/* ============================================================
   HEADER — one pattern for every page (G3).
   Square, sticky, black. Brand left, context action right.
   ============================================================ */
.wld-hdr{background:var(--ink);padding:10px 16px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:50;}
.wld-hdr img{width:26px;height:26px;object-fit:contain;flex-shrink:0;}
.wld-hdr-brand{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;text-decoration:none;}
.wld-hdr-url{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;color:var(--paper);letter-spacing:.08em;text-transform:uppercase;line-height:1.1;}
.wld-hdr-kicker{font-family:var(--mono);font-size:var(--fs-micro);color:var(--yellow);letter-spacing:.08em;text-transform:uppercase;line-height:1.1;}
.wld-hdr-back{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--bg);text-decoration:none;border:1px solid var(--mute);padding:9px 12px;white-space:nowrap;cursor:pointer;background:transparent;transition:.12s;}
.wld-hdr-back:hover{background:var(--bg);color:var(--ink);border-color:var(--bg);}

/* ============================================================
   BUTTON HIERARCHY (G4)
   .btn-primary  — the one main action on screen (weiter, bestätigen, aufdecken)
   .btn-answer   — exercise answer choices (the only large bordered buttons)
   .btn-utility  — small tools (Mischen, zurück-nav, end-screen secondaries)
   .wld-tg       — state toggles with visible on/off affordance (G6)
   ============================================================ */
.btn-primary{font-family:var(--display);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;padding:13px 22px;cursor:pointer;background:var(--ink);color:var(--bg);border:1.5px solid var(--ink);transition:.12s;}
.btn-primary:hover:not(:disabled){background:var(--accent);border-color:var(--accent);}
.btn-primary:disabled{opacity:.35;cursor:default;}

.btn-answer{font-family:var(--body);font-size:1rem;font-weight:600;text-align:center;padding:14px 10px;background:var(--card);border:1.5px solid var(--ink);color:var(--ink);cursor:pointer;transition:.12s;}
.btn-answer:hover:not(:disabled){background:var(--ink);color:var(--bg);}
.btn-answer:disabled{cursor:default;}
.btn-answer.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok);}
.btn-answer.no{border-color:var(--err);background:var(--err-bg);color:var(--err);}

.btn-utility{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:9px 12px;cursor:pointer;border:1px solid var(--mute);background:transparent;color:var(--ink);white-space:nowrap;transition:.12s;}
.btn-utility:hover:not(:disabled){background:var(--ink);color:var(--bg);border-color:var(--ink);}
.btn-utility:disabled{opacity:.3;cursor:default;}

.wld-tg{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:8px 11px;cursor:pointer;border:1px solid var(--mute);background:transparent;color:var(--mute);white-space:nowrap;transition:.12s;}
.wld-tg::before{content:"○ ";font-weight:700;}
.wld-tg.on{border-color:var(--accent);background:var(--das-bg);color:var(--accent);}
.wld-tg.on::before{content:"● ";}

/* Keyboard focus visibility (a11y) */
.btn-primary:focus-visible,.btn-answer:focus-visible,.btn-utility:focus-visible,.wld-tg:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ============================================================
   FEEDBACK / NOTICE blocks — borderless, left-rule only (D1)
   ============================================================ */
.wld-note{padding:12px 14px;border-left:4px solid var(--ink);background:var(--paper);font-size:var(--fs-body);line-height:1.5;}
.wld-note.ok{border-left-color:var(--ok);background:var(--ok-bg);}
.wld-note.err{border-left-color:var(--err);background:var(--err-bg);}
.wld-note.hint{border-left-color:var(--yellow);background:var(--paper);}

/* ============================================================
   BANNER — emphasis without danger semantics (A8 / Scott round 3):
   the "Schwierige Wörter üben" treatment. Yellow rule + tan bg.
   ============================================================ */
.wld-banner{display:flex;align-items:center;gap:12px;background:var(--paper);border-left:4px solid var(--yellow);padding:12px 15px;cursor:pointer;border-top:none;border-right:none;border-bottom:none;width:100%;text-align:left;font-family:var(--body);transition:.12s;}
.wld-banner:hover{background:var(--paper-dk);}
.wld-banner-ico{font-size:1.3rem;flex-shrink:0;}
.wld-banner-title{font-family:var(--display);font-size:.95rem;text-transform:uppercase;color:var(--ink);line-height:1.2;}
.wld-banner-sub{font-size:var(--fs-small);color:var(--mute);margin-top:2px;}
.wld-banner-go{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink);letter-spacing:.05em;margin-left:auto;white-space:nowrap;}

/* ============================================================
   CHIPS — setup-screen selections (D2). Selected state is the
   low-contrast darker-tan treatment (deliberately NOT ink, so it
   never competes with the primary Start/Weiter button).
   ============================================================ */
.wld-chip{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:10px 12px;cursor:pointer;border:1px solid var(--mute);background:var(--card);color:var(--ink);transition:.12s;text-align:center;}
.wld-chip:hover{border-color:var(--ink);}
.wld-chip.sel{background:var(--paper-dk);border:1.5px solid var(--ink);font-weight:700;}
.wld-chip:disabled{opacity:.35;cursor:default;}
.wld-setup-label{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:18px 0 8px;}

/* Genus text colors */
.col-der{color:var(--der);} .col-die{color:var(--die);} .col-das{color:var(--das);}
.col-plu{color:var(--plu);} .col-kein{color:var(--kein);}

/* ============================================================
   MICRO-ANIMATIONS (WS2.5 / P5)
   ============================================================ */
@keyframes wldShake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(1px);}30%,50%,70%{transform:translateX(-3px);}40%,60%{transform:translateX(3px);}}
@keyframes wldBounceOk{0%,100%{transform:translateY(0);}30%{transform:translateY(-5px);}60%{transform:translateY(1px);}}
@keyframes wldExpandIn{from{opacity:0;transform:translateY(-4px);max-height:0;}to{opacity:1;transform:translateY(0);max-height:400px;}}
.anim-shake{animation:wldShake .5s cubic-bezier(.36,.07,.19,.97);}
.anim-ok{animation:wldBounceOk .4s ease;}
.anim-expand{animation:wldExpandIn .28s ease;overflow:hidden;}
@media(prefers-reduced-motion:reduce){.anim-shake,.anim-ok,.anim-expand{animation:none;}}

/* ============================================================
   KBD HINTS — one pattern, hidden on touch-size screens
   ============================================================ */
.wld-kbd-hints{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:11px;}
.wld-kbd-hint{font-family:var(--mono);font-size:var(--fs-micro);color:var(--mute);letter-spacing:.04em;}
.wld-kbd{display:inline-block;background:var(--paper);border:1px solid var(--ink);padding:1px 5px;font-size:.7rem;font-family:var(--mono);}
@media(max-width:479px){.wld-kbd-hints{display:none;}}

/* ============================================================
   BOTTOM SHEET (KONJ etc., WS2.3)
   ============================================================ */
.wld-sheet-backdrop{position:fixed;inset:0;background:rgba(14,14,13,.45);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s;}
.wld-sheet-backdrop.open{opacity:1;pointer-events:auto;}
.wld-sheet{position:fixed;left:0;right:0;bottom:0;z-index:91;background:var(--card);border-top:2px solid var(--ink);max-width:520px;margin:0 auto;padding:20px 18px 24px;transform:translateY(102%);transition:transform .25s ease;max-height:75dvh;overflow-y:auto;}
.wld-sheet.open{transform:translateY(0);}
@media(prefers-reduced-motion:reduce){.wld-sheet{transition:none;}.wld-sheet-backdrop{transition:none;}}