/* ═══════════════════════════════════════════════════════════════
   QOTA DESIGN TOKENS
   Single source of truth for colors, spacing, typography, radii.
   Mirrors .plans/qota-redesign/tokens.jsx — keep in sync.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Warm neutrals — stone/paper tones ──────────────────── */
  --q-bg:        #F4F2ED;
  --q-bg-soft:   #EEEBE3;
  --q-card:      #FBFAF7;
  --q-card-soft: #F7F5F0;
  --q-ink:       #0E0E0C;
  --q-ink-2:     #2B2B27;
  --q-ink-muted: #6C6A63;
  --q-ink-faint: #A7A49C;
  --q-line:      rgba(14, 14, 12, 0.08);
  --q-line-2:    rgba(14, 14, 12, 0.12);

  /* ─── Accent — deep forest (primary brand) ───────────────── */
  --q-accent:       #1F5F3F;
  --q-accent-dk:    #0F3B25;
  --q-accent-soft:  #E6EEE9;
  --q-accent-ink:   #0A2418;

  /* ─── Circle accent palette ──────────────────────────────── */
  --q-circle-forest:      #1F5F3F;
  --q-circle-forest-soft: #E6EEE9;
  --q-circle-indigo:      #3B3F7A;
  --q-circle-indigo-soft: #E4E5F0;
  --q-circle-terra:       #B04A2E;
  --q-circle-terra-soft:  #F5E6DF;
  --q-circle-mustard:     #8B6A1C;
  --q-circle-mustard-soft:#F5ECD9;
  --q-circle-plum:        #5E2A4A;
  --q-circle-plum-soft:   #ECE0E7;
  --q-circle-ocean:       #1F4E5F;
  --q-circle-ocean-soft:  #DFEAEE;

  /* ─── Semantic ───────────────────────────────────────────── */
  --q-pos-ink: #0F3B25;
  --q-neg-ink: #7A1F1F;
  --q-neg-soft:#F2E3E3;
  --q-warn:    #8B6A1C;

  /* ─── Dark variant (hero cards) ──────────────────────────── */
  --q-night:       #111110;
  --q-night-card:  #1B1B19;
  --q-night-ink:   #F6F4EE;
  --q-night-mute:  rgba(246, 244, 238, 0.6);
  --q-night-line:  rgba(246, 244, 238, 0.08);

  /* ─── Typography ─────────────────────────────────────────── */
  --q-font-sans:    'Inter', -apple-system, system-ui, sans-serif;
  --q-font-display: 'General Sans', 'Inter', -apple-system, system-ui, sans-serif;
  --q-font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Type scale (px) */
  --q-fs-overline: 11px;
  --q-fs-caption:  12px;
  --q-fs-body:     14px;
  --q-fs-body-l:   16px;
  --q-fs-h3:       20px;
  --q-fs-h2:       28px;
  --q-fs-h1:       34px;
  --q-fs-display:  60px;

  /* ─── Radius scale ───────────────────────────────────────── */
  --q-r-pill: 999px;
  --q-r-sm:   10px;
  --q-r-md:   14px;
  --q-r-lg:   18px;
  --q-r-xl:   22px;
  --q-r-xxl:  28px;

  /* ─── Spacing scale (4-based) ────────────────────────────── */
  --q-sp-1: 4px;
  --q-sp-2: 8px;
  --q-sp-3: 12px;
  --q-sp-4: 16px;
  --q-sp-5: 20px;
  --q-sp-6: 24px;
  --q-sp-7: 32px;
  --q-sp-8: 40px;
  --q-sp-9: 56px;

  /* ─── Shadow (subtle, warm) ──────────────────────────────── */
  --q-shadow-sm:  0 1px 2px rgba(14, 14, 12, 0.04);
  --q-shadow-md:  0 4px 12px rgba(14, 14, 12, 0.06);
  --q-shadow-lg:  0 10px 32px rgba(14, 14, 12, 0.10);
  --q-shadow-hero:0 20px 60px rgba(14, 14, 12, 0.18);

  /* ─── Motion ─────────────────────────────────────────────── */
  --q-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --q-dur-fast:    150ms;
  --q-dur-base:    250ms;
  --q-dur-slow:    350ms;

  /* ─── Safe areas (for iOS Capacitor) ─────────────────────── */
  --q-safe-top:    env(safe-area-inset-top, 0px);
  --q-safe-bottom: env(safe-area-inset-bottom, 0px);
  --q-safe-left:   env(safe-area-inset-left, 0px);
  --q-safe-right:  env(safe-area-inset-right, 0px);

  /* Visual-Viewport keyboard inset (set by app.html bootstrap) */
  --q-kb-inset: 0px;
}

/* ═══════════════════════════════════════════════════════════════
   MEMBER IDENTITY COLORS
   Used for avatars, split rows, activity feed. Stable per member.
   ═══════════════════════════════════════════════════════════════ */

/* Semantische Rollen (bevorzugt nutzen) */
:root {
  --q-me-bg:      #C8BFA8;  /* beige — current user */
  --q-me-fg:      #2B2B27;
  --q-partner-bg: #8FB8A0;  /* sage — partner */
  --q-partner-fg: #0A2418;
  /* Weitere Kreis-Farben (Indizes) für >2er-Circles */
  --q-m3-bg: #D4A574; --q-m3-fg: #2B1A05;  /* jonas */
  --q-m4-bg: #B8AAD4; --q-m4-fg: #1F1A2E;  /* lea */
  --q-m5-bg: #D8A89A; --q-m5-fg: #2E150D;  /* tim */
  --q-m6-bg: #A8C8BA; --q-m6-fg: #0A2418;  /* paul */
}

/* Legacy data-member-Attribute (alter Code) — noch supported */
[data-member="steffen"] { --m-bg: var(--q-me-bg);      --m-fg: var(--q-me-fg); }
[data-member="marie"]   { --m-bg: var(--q-partner-bg); --m-fg: var(--q-partner-fg); }
[data-member="jonas"]   { --m-bg: var(--q-m3-bg);      --m-fg: var(--q-m3-fg); }
[data-member="lea"]     { --m-bg: var(--q-m4-bg);      --m-fg: var(--q-m4-fg); }
[data-member="tim"]     { --m-bg: var(--q-m5-bg);      --m-fg: var(--q-m5-fg); }
[data-member="paul"]    { --m-bg: var(--q-m6-bg);      --m-fg: var(--q-m6-fg); }

/* ═══════════════════════════════════════════════════════════════
   BASE LAYER
   Global body + html resets tailored to the warm paper look.
   ═══════════════════════════════════════════════════════════════ */

html, body {
  background: var(--q-bg);
  color-scheme: light;
}

/* Focus styling — soft accent ring, never the harsh browser-default blue */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--q-accent);
  outline-offset: 2px;
  border-radius: var(--q-r-md);
}
button:focus, button:focus-visible,
input:focus, textarea:focus, select:focus {
  outline: none;
}
/* Kill Browser-Default-Focus-Ring (Indigo/Blau) + Tailwind focus:ring-*.
   WICHTIG: q-input hat eigene Border-Accent-Reaktion; andere Inputs
   brauchen einen sichtbaren Fallback-Ring (WCAG 2.4.7). */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
  box-shadow: none !important;
}
/* q-input: Border-Akzent statt Ring, kein Outline */
input.q-input:focus-visible,
textarea.q-input:focus-visible,
select.q-input:focus-visible,
input.q-input--boxed:focus-visible,
textarea.q-input--boxed:focus-visible,
select.q-input--boxed:focus-visible {
  outline: none !important;
  border-color: var(--q-accent);
}
input.q-input--boxed:focus-visible,
textarea.q-input--boxed:focus-visible,
select.q-input--boxed:focus-visible {
  background: var(--q-card);
}
/* Alle anderen Inputs/Textareas/Selects bekommen einen Accent-Outline-Ring —
   ersetzt den unterdrückten Browser-Default */
input:not(.q-input):not(.q-input--boxed):focus-visible,
textarea:not(.q-input):not(.q-input--boxed):focus-visible,
select:not(.q-input):not(.q-input--boxed):focus-visible {
  outline: 2px solid var(--q-accent) !important;
  outline-offset: 2px;
}
.q-btn:focus-visible,
.q-icon-btn:focus-visible,
.q-fab:focus-visible {
  box-shadow: 0 0 0 3px var(--q-accent-soft), 0 0 0 4px var(--q-accent);
}

body {
  margin: 0;
  font-family: var(--q-font-sans);
  font-size: var(--q-fs-body);
  line-height: 1.5;
  color: var(--q-ink-2);
  background: var(--q-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Headlines default to display font */
h1, h2, h3, .q-display {
  font-family: var(--q-font-display);
  color: var(--q-ink);
  letter-spacing: -0.02em;
  margin: 0;
}
h1 { font-size: var(--q-fs-h1); font-weight: 500; line-height: 1.15; }
h2 { font-size: var(--q-fs-h2); font-weight: 500; line-height: 1.2; }
h3 { font-size: var(--q-fs-h3); font-weight: 600; line-height: 1.3; }

/* Paragraph defaults */
p  { margin: 0; }

/* Inherit font in buttons/inputs */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Remove iOS tap highlight globally */
a, button { -webkit-tap-highlight-color: transparent; }

/* Monospaced numbers where meaning matters */
.q-tabular { font-variant-numeric: tabular-nums; }

/* Hide scrollbars in snap carousels (keep usability) */
.q-scroll-x {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.q-scroll-x::-webkit-scrollbar { display: none; }

/* Safe-area helpers (Capacitor iOS + notch devices) */
.q-pt-safe { padding-top: var(--q-safe-top); }
.q-pb-safe { padding-bottom: var(--q-safe-bottom); }
.q-pl-safe { padding-left: var(--q-safe-left); }
.q-pr-safe { padding-right: var(--q-safe-right); }

/* Dynamic viewport — avoids iOS bounce + URL-bar jumps */
.q-h-screen { height: 100dvh; }
.q-min-h-screen { min-height: 100dvh; }

/* Utility: visually hidden but accessible */
.q-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════════════════════
   iOS / WebKit BUGFIX LAYER
   ═══════════════════════════════════════════════════════════════ */

/* Prevent long-press callout (iOS link/image context menu) on non-text UI */
button, a.q-btn, .q-tabbar__btn, .q-icon-btn, .q-fab, .q-chip, .q-quick,
.q-avatar, .q-color-swatch, .q-pill-tabs__tab {
  -webkit-touch-callout: none;
}

/* Scrollable areas: contain bounce, inherit keyboard-friendly scroll */
.q-scroll, [data-scroll], .q-sheet__body,
.overflow-y-auto, .overflow-auto, .no-scrollbar {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Keep focused inputs visible when iOS keyboard appears */
input, textarea, select {
  scroll-margin-block: 96px;
}

/* Prevent iOS from auto-zooming on inputs under 16px (defense in depth) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
textarea,
select {
  font-size: max(16px, 1em);
}

/* Body-scroll-lock utility (applied by JS when a sheet/modal is open) */
html.q-locked, html.q-locked body { overflow: hidden !important; touch-action: none; }

/* When the soft keyboard is visible, hide the floating tab bar so the user
   doesn't fight with a ghost bar behind the keyboard (WebKit + Capacitor). */
html.q-has-kb .q-tabbar,
html.q-has-kb .bottom-nav-safe,
html.q-has-kb .fab-safe-bottom { display: none !important; }