/* =====================================================================
   ANTHROPIC-WARM — Gemeinsames Design-System
   Ästhetik: "Editorial Warmth" — warm, ruhig, technisch-redaktionell.
   Anti-generisch: warmes Cremeweiß + Tonerde-Akzent (kein SaaS-Lila/Weiß),
   Serifen-Display (Fraunces) gegen klare Grotesk (Hanken Grotesk).

   Einbinden:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400&family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="anthropic-warm.css">
   ===================================================================== */

:root {
  /* ---- Farbwelt: 1 dominanter Ton, 1 Akzent, 1 Neutralsystem ---- */
  --aw-cream:        #F0EEE6;   /* dominanter Hintergrund (Anthropic-Ivory) */
  --aw-cream-deep:   #E8E4D8;   /* Karten / abgesetzte Flächen */
  --aw-paper:        #FAF9F5;   /* "Papier", hellste Fläche */

  --aw-clay:         #CC785C;   /* Akzent: Tonerde/Book-Cloth */
  --aw-clay-deep:    #A85940;   /* Akzent gedrückt / Hover */
  --aw-clay-soft:    #E8C4B6;   /* Akzent gedämpft / Flächen */

  --aw-ink:          #1A1915;   /* Haupttext, fast-schwarz warm */
  --aw-slate:        #51504B;   /* Sekundärtext */
  --aw-mute:         #8C8A82;   /* Tertiär / Captions */
  --aw-line:         #D6D2C4;   /* Trennlinien / Borders */

  --aw-success:      #5C7A5C;
  --aw-warning:      #C99A3C;
  --aw-danger:       #B0503C;

  /* ---- Typografie ---- */
  --aw-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --aw-font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* Skala (modular ~1.25) */
  --aw-text-xs:  0.78rem;
  --aw-text-sm:  0.9rem;
  --aw-text-base:1rem;
  --aw-text-lg:  1.25rem;
  --aw-text-xl:  1.6rem;
  --aw-text-2xl: 2.1rem;
  --aw-text-3xl: 2.9rem;
  --aw-text-4xl: 4rem;

  /* ---- Rhythmus (8er-Basis) ---- */
  --aw-1: 0.25rem; --aw-2: 0.5rem; --aw-3: 0.75rem; --aw-4: 1rem;
  --aw-6: 1.5rem;  --aw-8: 2rem;   --aw-12: 3rem;   --aw-16: 4rem;
  --aw-24: 6rem;

  /* ---- Form & Tiefe ---- */
  --aw-radius-sm: 6px;
  --aw-radius:    12px;
  --aw-radius-lg: 20px;
  --aw-shadow:    0 1px 2px rgba(26,25,21,.04), 0 8px 24px rgba(26,25,21,.06);
  --aw-shadow-lg: 0 2px 4px rgba(26,25,21,.05), 0 20px 50px rgba(26,25,21,.12);

  /* ---- Motion ---- */
  --aw-ease:  cubic-bezier(.22,.61,.36,1);
  --aw-fast:  160ms;
  --aw-slow:  420ms;
}

/* ---- Dark (optional, z.B. fürs Dashboard) ---- */
[data-theme="dark"] {
  --aw-cream:      #1A1915;
  --aw-cream-deep: #232118;
  --aw-paper:      #14130F;
  --aw-ink:        #F0EEE6;
  --aw-slate:      #C2BFB4;
  --aw-mute:       #8C8A82;
  --aw-line:       #33312A;
  --aw-clay-soft:  #5C3B2E;
}

/* =========================== Basis =========================== */
*,*::before,*::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--aw-cream);
  color: var(--aw-ink);
  font-family: var(--aw-font-body);
  font-size: var(--aw-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3 { font-family: var(--aw-font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 var(--aw-4); }
h1 { font-size: var(--aw-text-4xl); }
h2 { font-size: var(--aw-text-2xl); }
h3 { font-size: var(--aw-text-lg); font-weight: 600; }
.aw-eyebrow { font-size: var(--aw-text-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--aw-clay-deep); font-weight: 600; }

a { color: var(--aw-clay-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* =========================== Buttons =========================== */
.aw-btn {
  font-family: var(--aw-font-body); font-weight: 600; font-size: var(--aw-text-base);
  padding: var(--aw-3) var(--aw-6); border-radius: var(--aw-radius);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--aw-fast) var(--aw-ease), background var(--aw-fast) var(--aw-ease);
}
.aw-btn:active { transform: translateY(1px); }
.aw-btn--primary { background: var(--aw-clay); color: var(--aw-paper); }
.aw-btn--primary:hover { background: var(--aw-clay-deep); }
.aw-btn--ghost { background: transparent; color: var(--aw-ink); border-color: var(--aw-line); }
.aw-btn--ghost:hover { background: var(--aw-cream-deep); }

/* =========================== Karten =========================== */
.aw-card {
  background: var(--aw-paper); border: 1px solid var(--aw-line);
  border-radius: var(--aw-radius-lg); padding: var(--aw-8);
  box-shadow: var(--aw-shadow);
  transition: transform var(--aw-slow) var(--aw-ease), box-shadow var(--aw-slow) var(--aw-ease);
}
.aw-card:hover { transform: translateY(-4px); box-shadow: var(--aw-shadow-lg); }

/* =========================== Input =========================== */
.aw-input {
  font-family: var(--aw-font-body); font-size: var(--aw-text-base);
  padding: var(--aw-3) var(--aw-4); width: 100%;
  background: var(--aw-paper); color: var(--aw-ink);
  border: 1px solid var(--aw-line); border-radius: var(--aw-radius);
}
.aw-input:focus { outline: 2px solid var(--aw-clay-soft); border-color: var(--aw-clay); }

/* =========================== Badge =========================== */
.aw-badge {
  display: inline-flex; align-items: center; gap: var(--aw-2);
  font-size: var(--aw-text-xs); font-weight: 600; padding: var(--aw-1) var(--aw-3);
  border-radius: 999px; background: var(--aw-clay-soft); color: var(--aw-clay-deep);
}

/* Zugänglichkeit: sichtbarer Fokus */
:focus-visible { outline: 2px solid var(--aw-clay); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }