/* ============================================================
   WILCO DS — токены и базовые примитивы.
   Светлая «бумажная» тема: эспрессо + песок + фирменный зелёный.
   Общая база для анкеты и админки.
   ============================================================ */
:root{
  --wilco-green:#DFFFB3; --wilco-espresso:#3F3933; --wilco-black:#000; --wilco-sand:#E2DDD9; --wilco-white:#fff;
  --espresso-900:#2A2521; --espresso-800:#3F3933; --espresso-700:#524A42; --espresso-600:#6B6259; --espresso-500:#8A8077; --espresso-300:#B8B0A7;
  --sand-100:#F4F2EF; --sand-200:#E2DDD9; --sand-300:#D3CDC7; --sand-400:#BDB6AF;
  --green-50:#F3FFE3; --green-100:#DFFFB3; --green-200:#CDF394; --green-300:#B6E072;
  --accent-blue:#4F69AD; --accent-orange:#FA9F42; --accent-maroon:#982649; --accent-olive:#949D6A; --accent-red:#DB504A; --accent-cyan:#6DC0D5;

  --border-hair:rgba(63,57,51,.14); --border-default:var(--sand-300); --border-strong:var(--espresso-800);
  --shadow-xs:0 1px 2px rgba(42,37,33,.06); --shadow-sm:0 2px 8px rgba(42,37,33,.08); --shadow-md:0 8px 24px rgba(42,37,33,.10);
  --radius-sm:6px; --radius-md:8px; --radius-lg:14px; --radius-full:999px;

  --font-display:'Newsreader','Iowan Old Style',Georgia,'Times New Roman',serif;
  --font-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --bg:var(--sand-100); --panel:var(--wilco-white); --text:var(--wilco-espresso); --muted:var(--espresso-500);
}

*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
::selection{background:var(--wilco-green);color:var(--wilco-espresso)}
:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px;border-radius:4px}

/* ---------------- кнопки ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:13px 24px;border-radius:var(--radius-full);
  border:1.5px solid var(--border-strong);background:var(--wilco-white);color:var(--wilco-espresso);
  transition:background .14s,border-color .14s,opacity .14s;min-height:48px;
}
a.btn{text-decoration:none}
.btn:hover:not(:disabled){background:var(--sand-100)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--wilco-espresso);border-color:var(--wilco-espresso);color:var(--wilco-white)}
.btn-primary:hover:not(:disabled){background:var(--espresso-900);border-color:var(--espresso-900)}
.btn-accent{background:var(--wilco-green);border-color:var(--wilco-green);color:var(--wilco-espresso)}
.btn-accent:hover:not(:disabled){background:var(--green-200);border-color:var(--green-200)}
.btn-ghost{border-color:transparent;color:var(--espresso-600);padding:13px 14px}
.btn-ghost:hover:not(:disabled){background:var(--sand-200);color:var(--wilco-espresso)}
.btn-sm{padding:8px 14px;font-size:13px;min-height:36px}

/* ---------------- поля ---------------- */
.field{
  width:100%;background:var(--wilco-white);
  border:1.5px solid var(--border-default);border-radius:var(--radius-md);
  padding:12px 14px;transition:border-color .14s;
}
.field:focus{outline:none;border-color:var(--wilco-espresso)}
textarea.field{min-height:120px;resize:vertical;line-height:1.55}
label.lbl{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--espresso-500);margin-bottom:6px}

/* ---------------- служебное ---------------- */
.placard{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--wilco-espresso);
}
.placard::before{
  content:'';display:inline-block;width:16px;height:11px;margin-right:8px;vertical-align:-1px;
  background:currentColor;
  -webkit-mask:url('../img/logomark.png') center/contain no-repeat;
  mask:url('../img/logomark.png') center/contain no-repeat;
}
.muted{color:var(--muted)}
.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:var(--radius-full);background:var(--sand-200);color:var(--espresso-700);
}
.chip-green{background:var(--wilco-green);color:var(--wilco-espresso)}
.chip-red{background:#FBE4E3;color:#8E2B27}
.chip-blue{background:#E5EAF6;color:#33477C}
.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}