/* Impact Stones — Design Tokens (1:1 from mockup) */
:root {
  /* Backgrounds */
  --bg-deep: #10100E;
  --bg-soft: #181714;
  --bg-card: #211F1A;
  --bg-elev: #2B2822;

  /* Text */
  --text-primary: #F4EEE2;
  --text-secondary: #B9AA91;
  --text-tertiary: #7D7468;

  /* Accents */
  --ember: #D7A84A;
  --copper: #B86B3F;
  --sage: #91A38A;
  --crimson: #A94A3A;
  --steel: #6F8490;

  /* Theme accent (overridden per theme) */
  --accent: #6F8490;
  --accent-glow: rgba(111, 132, 144, 0.32);

  /* Type */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'Inter', -apple-system, system-ui, sans-serif;
}

[data-theme="discipline"] { --accent: #6F8490; --accent-glow: rgba(111,132,144,0.34); }
[data-theme="health"]     { --accent: #91A38A; --accent-glow: rgba(145,163,138,0.34); }
[data-theme="challenge"]  { --accent: #A94A3A; --accent-glow: rgba(169,74,58,0.34); }
/* Public/Story-View — Brand-Farbe Ember statt Stein-Theme.
   Wird gesetzt wenn Atlas-Besucher die öffentliche Story sehen. */
[data-theme="ember"]      { --accent: #D7A84A; --accent-glow: rgba(215,168,74,0.34); }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overscroll-behavior-y: contain;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.font-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }

.label-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Card */
.card {
  background: linear-gradient(145deg, rgba(43,40,34,0.92), rgba(27,25,21,0.96));
  border: 1px solid rgba(244,238,226,0.08);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 18px;
}

.tile {
  background: linear-gradient(145deg, rgba(43,40,34,0.92), rgba(27,25,21,0.96));
  border: 1px solid rgba(244,238,226,0.08);
  border-radius: 22px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  min-height: 76px;
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
  text-align: left;
  color: inherit;
  width: 100%;
}
.tile:hover, .tile:focus { border-color: rgba(215,168,74,0.35); transform: translateY(-1px); outline: none; }

.tile-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: rgba(215,168,74,0.10);
  border: 1px solid rgba(215,168,74,0.18);
  display: flex; align-items: center; justify-content: center;
  color: var(--ember);
  flex-shrink: 0;
}
.tile-title { font-family: var(--font-display); font-size: 19px; line-height: 1.15; color: var(--text-primary); }
.tile-sub   { font-family: var(--font-ui); font-size: 13px; color: var(--text-tertiary); margin-top: 3px; }
.tile-chev  { color: var(--text-tertiary); margin-left: auto; }

.btn-primary {
  background: var(--ember); color: #1a1410; border: 0;
  height: 52px; border-radius: 14px;
  font-family: var(--font-ui); font-weight: 600; font-size: 16px;
  width: 100%; cursor: pointer;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 28px rgba(215,168,74,0.18);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(215,168,74,0.28); }
.btn-primary:disabled { opacity: 0.5; cursor: default; transform: none; }

.btn-ghost {
  background: transparent; color: var(--text-primary);
  border: 1px solid rgba(244,238,226,0.16);
  height: 52px; border-radius: 14px;
  font-family: var(--font-ui); font-weight: 500; font-size: 15px;
  width: 100%; cursor: pointer;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(244,238,226,0.04);
  border: 1px solid rgba(244,238,226,0.10);
  color: var(--text-secondary);
  font-size: 13px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 180ms ease;
}
.chip:hover { background: rgba(244,238,226,0.07); }
.chip.active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--text-primary);
}

.pin-input {
  width: 60px; height: 72px;
  background: rgba(244,238,226,0.04);
  border: 1px solid rgba(244,238,226,0.12);
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 32px; text-align: center;
  color: var(--text-primary);
  outline: none;
}
.pin-input.filled { border-color: var(--ember); background: rgba(215,168,74,0.08); }

@keyframes stone-breath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes stone-glow   { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes ping         { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(2.8); opacity: 0; } }

.no-motion .breath, .no-motion .glow { animation: none !important; }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(215,168,74,0.10);
  border: 1px solid rgba(215,168,74,0.22);
  color: var(--ember);
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
}
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px var(--ember); }

.tl-rail { position: absolute; left: 18px; top: 22px; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--accent), rgba(244,238,226,0.05)); }
.tl-item { position: relative; padding-left: 44px; padding-bottom: 22px; }
.tl-dot {
  position: absolute; left: 12px; top: 8px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg-deep);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(16,16,14,1), 0 0 12px var(--accent-glow);
}

.flavor-prefix, .flavor-footer {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.flavor-prefix { font-size: 13px; margin-bottom: 4px; }
.flavor-footer { font-size: 12px; text-align: center; margin-top: 18px; opacity: 0.85; }