/* ============================================================================
   BLOOM CHÉRIE — DESIGN SYSTEM
   Stil: Editorial Quiet Luxury
   Alle Farbpaare sind gegen WCAG 2.1 AA geprüft (siehe DESIGN-SYSTEM.md).
   Diese Datei definiert NUR Tokens + Primitives. Layout bleibt in style-v2.css.
   ========================================================================== */

:root {
  /* ── FARBE ──────────────────────────────────────────────────────────────
     Regel: Pink ist NIE Textfarbe (1.52:1) — nur Fläche, Rahmen, Akzent.
     Text nutzt --ink / --ink-mute / --brand.                              */
  --brand:          #8B1A3C;   /* Burgundy  — 8.62:1 auf Creme  ✓ AA      */
  --brand-hover:    #6B1230;   /* dunkler   — 11.97:1 mit Weiß  ✓ AA      */
  --brand-soft:     #FDF0F6;   /* Blush-Fläche für Badges/Chips           */
  --accent:         #F6BDD1;   /* Pink — nur Fläche/Deko, nie Text        */
  --accent-deep:    #EDA8C3;

  --ink:            #1A1416;   /* Fließtext — 17.24:1  ✓ AAA              */
  --ink-mute:       #5C4C54;   /* Sekundär  —  7.61:1  ✓ AA               */
  --ink-invert:     #FFFFFF;

  --surface:        #FDF8F5;   /* Creme — Seitenhintergrund               */
  --surface-raised: #FFFFFF;   /* Karten, Drawer                          */
  --surface-sunken: #F6EEF2;   /* Eingaben, Skeletons                     */

  --line:           #EFE1E7;   /* dekorative Haarlinie                    */
  --line-strong:    #A8808F;   /* interaktiver Rahmen — 3.24:1  ✓ AA UI   */

  --success:        #1E6B4E;   /*  6.10:1  ✓ AA */
  --success-soft:   #E8F4EE;
  --danger:         #A3202B;   /*  7.12:1  ✓ AA */
  --danger-soft:    #FBEAEA;
  --warning:        #8A5A00;
  --warning-soft:   #FCF3E3;

  /* ── TYPOGRAFIE ─────────────────────────────────────────────────────────
     Display = Cormorant Garamond (Charakter), UI = Inter (Lesbarkeit).
     Body nie unter 16px. Maß (measure) 45–75 Zeichen via --measure.       */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs:   0.75rem;   /* 12px — nur Meta/Labels, nie Fließtext */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px — Mindestgröße Fließtext         */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.5rem;    /* 40px */
  --text-4xl:  3.5rem;    /* 56px */

  --leading-tight: 1.15;  /* Display */
  --leading-snug:  1.35;  /* Überschriften */
  --leading-body:  1.6;   /* Fließtext (Lupton: 1.4–1.6) */
  --tracking-wide: 0.09em;
  --measure:       68ch;

  /* ── RAUM ── 4px-Basis, konsistente Sprünge ───────────────────────────── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-8: 3rem;     --sp-10: 4rem;
  --sp-12: 6rem;    --sp-16: 8rem;

  /* ── FORM ── */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 24px;  --r-full: 999px;

  --shadow-sm:  0 1px 2px rgba(26,20,22,.05), 0 1px 3px rgba(26,20,22,.06);
  --shadow-md:  0 4px 10px rgba(26,20,22,.06), 0 2px 4px rgba(26,20,22,.04);
  --shadow-lg:  0 12px 32px rgba(26,20,22,.10), 0 4px 10px rgba(26,20,22,.05);
  --shadow-brand: 0 10px 26px rgba(139,26,60,.24);

  /* ── BEWEGUNG ──────────────────────────────────────────────────────────
     Kowalski: nie ease-in für UI. Enter = ease-out. UI bleibt < 300ms.    */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-press:  140ms;  /* Button-Feedback   */
  --dur-fast:   180ms;  /* Tooltips, Chips   */
  --dur-ui:     220ms;  /* Dropdowns, Toasts */
  --dur-drawer: 320ms;  /* Drawer, Modal     */

  --z-header: 900; --z-fab: 1000; --z-overlay: 1100;
  --z-drawer: 1200; --z-toast: 1300;
}

/* ══ BASIS ════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

/* Sichtbarer Fokus auf ALLEM — nie outline:none ohne Ersatz (WCAG 2.4.7) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Screenreader-only, aber fokussierbar */
.bc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bc-skip {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 9999;
  background: var(--brand); color: var(--ink-invert);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-full);
  font: 500 var(--text-sm)/1 var(--font-ui); text-decoration: none;
  transition: top var(--dur-ui) var(--ease-out);
}
.bc-skip:focus { top: var(--sp-4); }

/* ══ BUTTONS ══════════════════════════════════════════════════════════════
   Touch-Ziel ≥ 44px (WCAG 2.5.5). :active scale(0.97) = sofortiges Feedback. */

.bc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 48px; padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent; border-radius: var(--r-full);
  font: 500 var(--text-base)/1.2 var(--font-ui);
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              color var(--dur-fast) ease;
}
.bc-btn:active:not(:disabled) { transform: scale(0.97); }
.bc-btn:disabled { opacity: .45; cursor: not-allowed; }

.bc-btn--primary   { background: var(--brand); color: var(--ink-invert);
                     box-shadow: var(--shadow-brand); }
.bc-btn--secondary { background: var(--surface-raised); color: var(--brand);
                     border-color: var(--line-strong); }
.bc-btn--ghost     { background: transparent; color: var(--brand); }
.bc-btn--block     { width: 100%; }
.bc-btn--sm        { min-height: 44px; padding: var(--sp-2) var(--sp-4);
                     font-size: var(--text-sm); }

/* Hover nur auf echten Zeigegeräten — sonst „klebt" er auf Touch */
@media (hover: hover) and (pointer: fine) {
  .bc-btn--primary:hover   { background: var(--brand-hover); }
  .bc-btn--secondary:hover { background: var(--brand-soft); }
  .bc-btn--ghost:hover     { background: var(--brand-soft); }
}

/* PayPal behält seine Markenfarbe — Wiedererkennung schlägt Konsistenz */
.bc-btn--paypal { background: #FFC439; color: #0B1E3B; border-color: #E5A400; }
@media (hover: hover) and (pointer: fine) {
  .bc-btn--paypal:hover { background: #F0B72E; }
}

/* Lade-Zustand: Text bleibt stehen, Spinner ersetzt ihn nicht abrupt */
.bc-btn[aria-busy="true"] { pointer-events: none; }
.bc-btn[aria-busy="true"] .bc-btn__label { opacity: .55; filter: blur(1.5px); }
.bc-btn__spin {
  width: 16px; height: 16px; border-radius: 50%; display: none;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: bc-spin 620ms linear infinite;
}
.bc-btn[aria-busy="true"] .bc-btn__spin { display: block; }
@keyframes bc-spin { to { transform: rotate(360deg); } }

/* ══ FORMULARFELDER ═══════════════════════════════════════════════════════
   Label immer sichtbar (nie Placeholder-als-Label). Fehler als Text +
   aria-describedby, nicht nur als rote Umrandung (WCAG 1.4.1 / 3.3.1).   */

.bc-field { display: block; margin-bottom: var(--sp-4); }
.bc-field__label {
  display: block; margin-bottom: var(--sp-2);
  font: 500 var(--text-sm)/1.3 var(--font-ui); color: var(--ink);
}
.bc-field__req  { color: var(--danger); font-weight: 600; }
.bc-field__hint { display: block; margin-top: var(--sp-1);
                  font: 400 var(--text-xs)/1.4 var(--font-ui); color: var(--ink-mute); }

.bc-input, .bc-select, .bc-textarea {
  width: 100%; min-height: 48px; padding: var(--sp-3);
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  font: 400 var(--text-base)/1.4 var(--font-ui);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
/* 16px verhindert den iOS-Auto-Zoom beim Fokus */
.bc-textarea { min-height: 96px; resize: vertical; }
.bc-input:focus, .bc-select:focus, .bc-textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(139,26,60,.16);
}
.bc-input[aria-invalid="true"], .bc-select[aria-invalid="true"] {
  border-color: var(--danger); box-shadow: 0 0 0 3px rgba(163,32,43,.14);
}
.bc-field__error {
  display: flex; gap: var(--sp-2); margin-top: var(--sp-2);
  font: 500 var(--text-sm)/1.4 var(--font-ui); color: var(--danger);
}
.bc-field__error::before { content: "!"; flex: 0 0 18px; height: 18px;
  background: var(--danger); color: #fff; border-radius: 50%;
  font-size: 12px; line-height: 18px; text-align: center; }

.bc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 520px) { .bc-row { grid-template-columns: 1fr; } }

/* ══ CHIPS (Mehrfachauswahl) ══════════════════════════════════════════════ */
.bc-chip {
  min-height: 44px; padding: var(--sp-2) var(--sp-4);
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-full);
  font: 400 var(--text-sm)/1.2 var(--font-ui); cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.bc-chip:active { transform: scale(0.97); }
.bc-chip[aria-pressed="true"] {
  background: var(--brand); color: var(--ink-invert); border-color: var(--brand);
}
/* Zustand nicht nur über Farbe — Häkchen als zweiter Kanal (WCAG 1.4.1) */
.bc-chip[aria-pressed="true"]::before { content: "✓ "; }

/* ══ BADGE / TRUST ════════════════════════════════════════════════════════ */
.bc-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
  background: var(--brand-soft); color: var(--brand);
  font: 600 var(--text-xs)/1.4 var(--font-ui);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.bc-badge--success { background: var(--success-soft); color: var(--success); }
.bc-badge--neutral { background: var(--surface-sunken); color: var(--ink-mute); }

/* ══ TOAST ════════════════════════════════════════════════════════════════
   Transitions statt Keyframes: Toasts kommen schnell hintereinander und
   müssen unterbrechbar sein (Sonner-Prinzip).                            */
.bc-toast-region {
  position: fixed; left: 50%; bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--sp-2);
  width: min(420px, calc(100vw - 2 * var(--sp-4))); pointer-events: none;
}
.bc-toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink); color: var(--ink-invert);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  font: 400 var(--text-sm)/1.4 var(--font-ui);
  opacity: 1; transform: translateY(0); pointer-events: auto;
  transition: opacity var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out);
}
.bc-toast[data-leaving="true"] { opacity: 0; transform: translateY(8px); }
@starting-style { .bc-toast { opacity: 0; transform: translateY(100%); } }
.bc-toast__img { width: 36px; height: 36px; border-radius: var(--r-sm);
                 object-fit: cover; flex: 0 0 auto; }
.bc-toast__action {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--accent); font: 600 var(--text-sm)/1 var(--font-ui);
  text-decoration: underline; padding: var(--sp-2); min-height: 44px;
}

/* ══ SKELETON ═════════════════════════════════════════════════════════════ */
.bc-skel {
  background: linear-gradient(90deg, var(--surface-sunken) 25%,
              #FBF4F7 50%, var(--surface-sunken) 75%);
  background-size: 200% 100%; border-radius: var(--r-md);
  animation: bc-shimmer 1.4s linear infinite;
}
@keyframes bc-shimmer { to { background-position: -200% 0; } }

/* ══ REDUZIERTE BEWEGUNG ══════════════════════════════════════════════════
   Nicht „alles aus": Opazität bleibt (hilft dem Verständnis),
   Positions-/Skalierungsbewegung verschwindet.                          */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .bc-btn:active { transform: none; }
  .bc-toast, .bc-toast[data-leaving="true"] { transform: none; }
}