/* ═══════════════════════════════════════════════════════════
   ANKAA tokens.css · Quelle der Wahrheit für alle Oberflächen
   Einbinden: <link rel="stylesheet" href="design/tokens.css?v=iris2">
   Regeln: design/DESIGN_RULES.md · Nie Hex hardcoden, immer var().
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Akzent (einziger Markenakzent) */
  --acc: #7C6CF0;
  --acc-bright: #9B8DFF;
  --acc-deep: #5A4AD6;
  --acc-ink: #0D0A16;            /* Text/Icon AUF Akzentflächen */
  --acc-rgb: 124, 108, 240;      /* nur für Legacy-rgba(), Neues nimmt color-mix */

  /* Grund & Flächen */
  --bg: #08070D;
  --surface: #12101A;
  --card-grad: linear-gradient(160deg, rgba(28,25,42,0.66), rgba(15,13,22,0.66));
  --card-grad-strong: linear-gradient(160deg, rgba(24,22,34,0.6), rgba(14,13,20,0.6));
  --border: rgba(255,255,255,0.09);
  --border-soft: rgba(255,255,255,0.06);

  /* Text */
  --text-1: #F7F4EE;   /* Display */
  --text-2: #F2EFE9;   /* primär */
  --text-3: #A8A296;   /* sekundär */
  --text-4: #6F6A60;   /* leise */

  /* Status (nur diese zwei) */
  --sage: #8FD6AE;
  --rose: #E58A8A;

  /* Abgeleitete Akzentflächen */
  --acc-tint-10: color-mix(in oklab, var(--acc) 10%, transparent);
  --acc-tint-16: color-mix(in oklab, var(--acc) 16%, transparent);
  --acc-line-30: color-mix(in oklab, var(--acc) 30%, transparent);
  --acc-line-45: color-mix(in oklab, var(--acc) 45%, transparent);
  --acc-glow-70: color-mix(in oklab, var(--acc) 70%, transparent);

  /* Verläufe */
  --grad-cta: linear-gradient(135deg, var(--acc-bright), var(--acc));
  --grad-ring: linear-gradient(135deg, var(--acc-bright), var(--acc));

  /* Schatten & Glow */
  --shadow-card: 0 24px 60px -40px #000;
  --shadow-cta: 0 14px 34px -12px var(--acc-glow-70);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--acc-line-45);

  /* Radius */
  --r-card: 22px;
  --r-card-lg: 26px;
  --r-chip: 13px;
  --r-pill: 999px;

  /* Spacing (4er-Raster) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* Typo */
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Manrope', system-ui, sans-serif;
  --fs-display: clamp(44px, 5.4vw, 70px);  /* Landing H1 */
  --fs-h1-app: 38px;
  --fs-h2: clamp(32px, 3.6vw, 48px);
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-micro: 11px;                        /* immer mit --ls-caps */
  --ls-caps: 0.2em;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-tap: 0.15s;
  --dur-view: 0.5s;
  --dur-reveal: 0.8s;

  /* Ebenen */
  --z-nav: 4; --z-sheet: 20; --z-player: 30; --z-toast: 40;
}

/* ── Basis ── */
html, body { margin: 0; padding: 0; background: var(--bg); }
body { color: var(--text-2); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
::selection { background: color-mix(in oklab, var(--acc) 32%, transparent); }
a { color: var(--acc-bright); }
a:hover { color: color-mix(in oklab, var(--acc-bright) 70%, white); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }

/* ── Phasen-Wash (JS setzt document.body.dataset.phase) ── */
body[data-phase] { transition: background 1.2s ease; }
body[data-phase="morgen"] { background: radial-gradient(120% 82% at 72% -8%, rgba(255,176,112,0.16), transparent 60%), var(--bg); }
body[data-phase="tag"]    { background: radial-gradient(120% 82% at 50% -8%, var(--acc-tint-10), transparent 60%), var(--bg); }
body[data-phase="abend"]  { background: radial-gradient(120% 82% at 28% -8%, rgba(180,120,255,0.18), transparent 62%), var(--bg); }
body[data-phase="nacht"]  { background: radial-gradient(120% 92% at 50% -12%, rgba(70,84,200,0.18), transparent 60%), var(--bg); }

/* ── Kern-Klassen (decken ~80% der UI ab) ── */
.ank-card {
  background: var(--card-grad);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-card);
}
.ank-btn-primary {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 26px;
  background: var(--grad-cta); color: var(--acc-ink);
  border: none; border-radius: var(--r-pill);
  font-family: var(--font-ui); font-weight: 800; font-size: 15px;
  box-shadow: var(--shadow-cta); cursor: pointer;
  transition: transform var(--dur-tap) ease;
}
.ank-btn-primary:hover { transform: translateY(-2px); }
.ank-btn-primary:active { transform: scale(0.98); }
.ank-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  background: rgba(255,255,255,0.02); color: var(--text-2);
  border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-pill);
  font-family: var(--font-ui); font-weight: 600; font-size: 15px; cursor: pointer;
}
.ank-chip {
  min-height: 44px; padding: 0 15px;
  border-radius: var(--r-chip);
  border: 1px solid var(--border); background: rgba(255,255,255,0.03);
  color: var(--text-3); font-family: var(--font-ui); font-weight: 600; font-size: 13px; cursor: pointer;
  transition: all var(--dur-tap) ease;
}
.ank-chip[aria-pressed="true"], .ank-chip.is-active {
  background: var(--acc-tint-16); border-color: var(--acc-line-45); color: var(--acc-bright);
}
.ank-section-label {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--text-4); margin-bottom: var(--s-3);
}
.ank-section-label::before {
  content: ''; width: 7px; height: 7px; border-radius: 2px;
  background: var(--acc); box-shadow: 0 0 10px var(--acc);
}
.ank-section-label::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }