/* ==========================================================
   style.css – Unified Design System (Aligned to view.css look)
   This file defines the global visual identity used across:
   - View (already using view.css tokens)
   - Questionnaire / Rating form
   - Personal Data Form (form-fields.css)
   The design language: soft cards, vivid accent, pill chips,
   micro-typography, accessible focus rings, dark mode support.

   NOTE:
   - We keep legacy variable names for backwards compatibility
     (e.g. --primary-color) but map them onto the new palette.
   - Dark mode: automatic via prefers-color-scheme plus optional
     .dark-mode class hook (JS can toggle it if desired).
   ========================================================== */

:root {
  /* Core Palette */
  --accent:#640ecd;
  --accent-rgb:100 14 205;
  --accent-alt:#8f5dff;
  --accent-alt-rgb:143 93 255;
  --accent-soft:#eee6ff;
  --accent-soft-alt:#efe8ff;
  --accent-gradient:linear-gradient(92deg,#640ecd,#8f5dff);

  --bg:#f7f4fc;
  --bg-alt:#f0ecf8;
  --card:#ffffff;
  --card-alt:#faf8ff;

  --border:#e0d8f0;
  --border-softer:#e9e2f5;
  --border-strong:#cdbce9;

  --text:#2f2340;
  --text-strong:#2b1e3b;
  --text-dim:#645b73;
  --text-faint:#8e85a1;
  --heading-weight:800;

  --danger:#e53935;
  --warn:#f6b800;
  --success:#27a857;
  --info:#2684ff;

  /* Shadows & Effects */
  --shadow-xs:0 1px 2px #00000012;
  --shadow-sm:0 2px 6px -1px #00000018;
  --shadow-md:0 4px 14px -4px #00000024;
  --shadow-focus:0 0 0 2px #ffffff,0 0 0 4px var(--accent);

  /* Radii */
  --radius-xs:4px;
  --radius-sm:6px;
  --radius:10px;
  --radius-lg:16px;
  --radius-xl:22px;
  --radius-pill:999px;

  /* Typography & Sizing */
  --font-ui:'Geist','Helvetica Neue',Arial,sans-serif;
  --font-emoji: /* 'Noto Emoji','Noto Color Emoji','Segoe UI Emoji','Apple Color Emoji','Twemoji Mozilla','EmojiSymbols',sans-serif; */
  --base-font-size:16.5px;
  font-size:var(--base-font-size);

  /* Spacing Scale */
  --space-1:2px;
  --space-2:4px;
  --space-3:6px;
  --space-4:8px;
  --space-5:10px;
  --space-6:12px;
  --space-7:14px;
  --space-8:16px;
  --space-9:20px;
  --space-10:24px;
  --space-12:32px;

  /* Interactive */
  --focus-ring:2px solid var(--accent-alt);
  --focus-ring-inset:0 0 0 2px var(--card),0 0 0 4px var(--accent-alt);

  /* Legacy Variable Mapping (Backward Compatibility) */
  --primary-color:var(--accent);
  --primary-dark:#3f067f;
  --primary-hover:var(--accent-alt);
  --primary-light:var(--accent-soft);
  --secondary-color:#FFDD44;
  --secondary-light:#fff6c7;
  --accent-1:#EF8354;
  --accent-2:#C9F9FF;
  --accent-3:#6BA368;
  --accent-4:#A37774;
  --accent-1-light:#ffe3d5;
  --accent-2-light:#eefeff;
  --accent-3-light:#e2f6e1;
  --accent-4-light:#f3d7d5;
  --danger:var(--danger);
  --text-color:var(--text);
  --text-light:var(--text-dim);
  --text-bold:var(--text-strong);
  --bg-color:var(--card);
  --section-bg:var(--bg-alt);
  --input-border:var(--border);
  --focus-shadow:var(--shadow-focus);
  --border-radius:var(--radius);
  --card-shadow:var(--shadow-sm);

  /* Form field sizing */
  --field-height:44px;
}

:root.dark-mode,
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#15121c;
  --bg-alt:#1c1923;
  --card:#1f1a29;
  --card-alt:#272233;

  --border:#322a3c;
  --border-softer:#3c3246;
  --border-strong:#4a3f58;

  --text:#f1eef7;
  --text-strong:#ffffff;
  --text-dim:#b5acc6;
  --text-faint:#8c829c;

  --accent:#8f5dff;
  --accent-alt:#b08bff;
  --accent-soft:#2d2538;
  --accent-soft-alt:#3a304a;
  --accent-gradient:linear-gradient(92deg,#8f5dff,#c2a2ff);

  --shadow-xs:0 1px 2px #00000070;
  --shadow-sm:0 2px 8px -2px #00000088;
  --shadow-md:0 4px 18px -4px #000000aa;
  --shadow-focus:0 0 0 2px #2d2538,0 0 0 4px var(--accent);
}

/* Global Base */
html,body {
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}

body {
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

header {
  top: 0;
  z-index: 30;
  backdrop-filter: blur(6px);
  background: linear-gradient(90deg,var(--bg),var(--bg));
  border-bottom: 1px solid var(--border);
  padding: 12px 14px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.emoji,
.emoji-font {
  font-family:var(--font-emoji);
  font-weight:400;
  line-height:1;
}

/* Headings */
h1,h2,h3,h4,h5 {
  font-family:var(--font-ui);
  font-weight:var(--heading-weight);
  margin:0 0 .6em;
  letter-spacing:.5px;
  line-height:1.15;
  color:var(--text-strong);
}
h1 { font-size:1.6rem; }
h2 { font-size:1.25rem; }
h3 { font-size:1.05rem; }
h4 { font-size:.95rem; }

p { line-height:1.45; margin:0 0 .9em; }

/* Links */
a {
  color:var(--accent);
  text-decoration:none;
  transition:color .18s;
}
a:hover { color:var(--accent-alt); }

/* Focus */
:focus-visible {
  outline:var(--focus-ring);
  outline-offset:2px;
}

/* Cards */
.app-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-8) var(--space-9);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .22s, border-color .22s, background .22s;
}
.app-card:hover {
  border-color:var(--accent);
  box-shadow:var(--shadow-md);
}

/* Chips / Buttons */
.chip-btn,
button.chip-btn,
a.chip-btn {
  background:var(--accent-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:7px 16px;
  font:600 .72rem/1.1 var(--font-ui);
  display:inline-flex;
  gap:6px;
  align-items:center;
  cursor:pointer;
  color:var(--text);
  letter-spacing:.3px;
  user-select:none;
  transition:background .18s, color .18s, border-color .18s, box-shadow .18s;
  position:relative;
}
.chip-btn:hover,
.chip-btn.active {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.chip-btn:focus-visible {
  outline:var(--focus-ring);
}

/* Primary Action */
.button-primary {
  background:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  border-radius:var(--radius-pill);
  padding:10px 20px;
  font:700 .8rem/1 var(--font-ui);
  letter-spacing:.4px;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:background .18s, transform .18s, box-shadow .18s;
}
.button-primary:hover {
  background:var(--accent-alt);
}
.button-primary:active { transform:translateY(1px); }

/* Inputs (baseline) */
input,select,textarea {
  font-family:var(--font-ui);
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  transition:border-color .18s, box-shadow .18s, background .18s;
  outline:none;
  box-sizing:border-box;
}
textarea { resize:vertical; }
input:focus,select:focus,textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-alt);
}

.tooltip-bubble {
  position: absolute;
  z-index: 9999;
  background: var(--tooltip-bg, #222);
  color: var(--tooltip-fg, #fff);
  font: 500 0.70rem/1.25 var(--font-ui, system-ui, sans-serif);
  padding: 6px 8px 7px;
  border-radius: 6px;
  box-shadow: 0 4px 18px -4px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .18s ease;
  pointer-events: none; /* Kein eigenes interaktives Ziel nötig */
  max-width: 240px;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
.tooltip-bubble.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tooltip-bubble[data-placement="bottom"] {
  transform: translateY(-4px);
}
.tooltip-bubble[data-placement="bottom"].visible {
  transform: translateY(0);
}
.info-btn,
.info-inline {
  cursor: pointer;
  background: none;
  border: none;
  color: var(--accent, #6a3dd9);
  padding: 0 4px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 0.75rem/1 var(--font-ui, system-ui, sans-serif);
}
.info-btn:hover,
.info-btn:focus-visible,
.info-inline:hover,
.info-inline:focus-visible {
  outline: none;
  color: var(--accent-strong, #8d5bff);
  text-shadow: 0 0 2px rgba(0,0,0,0.25);
}
@media (prefers-color-scheme: light) {
  .tooltip-bubble {
    background: #1f1f27;
    color: #fff;
  }
}
@media (prefers-color-scheme: dark) {
  .tooltip-bubble {
    background: #2d2735;
    color: #f8f8f9;
  }
}

/* Dark mode adjustments for base inputs */
:root.dark-mode input,
:root.dark-mode select,
:root.dark-mode textarea {
  background:#2a2331;
  border-color:var(--border);
  color:var(--text);
}
:root.dark-mode input:focus,
:root.dark-mode select:focus,
:root.dark-mode textarea:focus {
  box-shadow:0 0 0 2px var(--accent);
}

/* Scrollbars */
::-webkit-scrollbar {
  width:12px;
}
::-webkit-scrollbar-track {
  background:var(--bg);
}
::-webkit-scrollbar-thumb {
  background:var(--border);
  border-radius:20px;
  border:3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background:var(--accent);
}

/* Utility */
.text-dim { color:var(--text-dim)!important; }
.text-faint { color:var(--text-faint)!important; }
.flex { display:flex!important; }
.flex-wrap { flex-wrap:wrap!important; }
.gap-4 { gap:var(--space-4)!important; }
.mt-0 { margin-top:0!important; }
.mb-0 { margin-bottom:0!important; }
.hidden { display:none!important; }

/* Responsive base font scaling */
@media (max-width:680px){
  :root { font-size:15.2px; }
}