/* ============================================================
   AutoAdmin — Designsystem „Werkstatt"
   Warm editorial · Instrument Serif + Hanken Grotesk · Amber
   ============================================================ */
:root {
  /* paper / neutrals (warm) */
  --paper:    #EFE9DD;
  --paper-2:  #E7E0D1;
  --surface:  #F7F3EA;
  --surface-2:#FBF8F1;
  --ink:      #211C12;
  --ink-2:    #4A4334;
  --ink-3:    #6B6451;
  --ink-4:    #938B76;
  --rule:     #DDD4C2;
  --rule-2:   #CFC5B0;
  /* brand */
  --amber:    #E8A020;
  --amber-2:  #C26A1A;
  --amber-soft:#F6E4C4;
  --amber-dim: rgba(232,160,32,.12);
  --amber-border: rgba(194,106,26,.30);
  /* status */
  --green:    #3F7A37;  --green-bg:#EAF3E6;  --green-border:#CDE3C2;
  --yellow:   #9A6713;  --yellow-bg:#FAF0DB; --yellow-border:#EAD4A3;
  --red:      #B24A2D;  --red-bg:#F8EAE2;    --red-border:#E8CABA;
  --blue:     #2D5A8A;  --blue-bg:#E7EEF6;   --blue-border:#C4D6E8;
  /* dark contrast */
  --dark:     #211C12;
  --dark-2:   #2C2618;
  /* fx */
  --shadow:   0 1px 2px rgba(33,28,18,.05);
  --shadow-md:0 8px 24px -10px rgba(33,28,18,.18);
  --shadow-lg:0 30px 70px -34px rgba(33,28,18,.42);
  --radius:   14px;
}
* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'Hanken Grotesk', system-ui, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--amber); color: var(--ink); }

/* ---- type helpers ---- */
.serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
.mono  { font-family: 'JetBrains Mono', monospace; }
.it    { font-style: italic; color: var(--amber-2); }
.amber-text { color: var(--amber-2); }

/* ---- eyebrow ---- */
.eyebrow { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber-2); font-weight: 600; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px; font-weight: 600; border-radius: 100px; cursor: pointer; border: 1px solid transparent;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ink); color: var(--paper); padding: 14px 28px; }
.btn-primary:hover { background: var(--amber-2); transform: translateY(-2px); }
.btn-amber { background: var(--amber); color: var(--ink); padding: 14px 28px; }
.btn-amber:hover { background: var(--amber-2); color: #fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); padding: 14px 24px; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-link { background: transparent; color: var(--ink); padding: 14px 6px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--amber); }
.btn-link:hover { color: var(--amber-2); }

/* ---- reveal-on-scroll ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }