/* ==========================================================================
   DESIGN TOKENS — Single Source of Truth
   fs_zuschnitte Konfigurator Design System
   ==========================================================================
   Importiert VOR paper.css und material-quiz.css.
   Alle Komponenten sollen diese Tokens referenzieren statt eigene Werte.
   ========================================================================== */

:root {

  /* ===================================================================
     1. FARBEN
     =================================================================== */

  /* --- Brand (Theme-abhaengig, wird in frankenschaum.css / myschaumstoff.css ueberschrieben) --- */
  --fs-brand: var(--brand-primary, #b81818);
  --fs-brand-hover: var(--brand-primary-hover, #9a1414);
  --fs-brand-active: var(--brand-primary-active, #7d1010);
  --fs-brand-rgb: var(--brand-primary-rgb, 184, 24, 24);
  --fs-brand-button: var(--brand-button, #c8102e);
  --fs-brand-button-hover: var(--brand-button-hover, #a00d24);

  /* --- Neutrals (Grau-Skala) --- */
  --fs-gray-50:  #fafafa;
  --fs-gray-100: #f5f5f5;
  --fs-gray-200: #e5e5e5;
  --fs-gray-300: #d4d4d4;
  --fs-gray-400: #a3a3a3;
  --fs-gray-500: #737373;
  --fs-gray-600: #525252;
  --fs-gray-700: #404040;
  --fs-gray-800: #262626;
  --fs-gray-900: #171717;

  /* --- Semantische Farben --- */
  --fs-text-primary: #1a1a1a;
  --fs-text-secondary: #525252;
  --fs-text-tertiary: #737373;
  --fs-text-disabled: #9ca3af;        /* 4.6:1 auf weiss (WCAG AA) */
  --fs-text-on-brand: #ffffff;
  --fs-text-on-dark: #f5f5f5;

  --fs-bg-primary: #ffffff;
  --fs-bg-secondary: #fafafa;
  --fs-bg-tertiary: #f5f5f5;
  --fs-bg-disabled: #f3f4f6;

  --fs-border-default: #e5e5e5;
  --fs-border-strong: #d4d4d4;
  --fs-border-brand: rgba(var(--fs-brand-rgb), 0.3);

  /* --- Feedback --- */
  --fs-success: #10b981;
  --fs-success-bg: #ecfdf5;
  --fs-warning: #f59e0b;
  --fs-warning-bg: #fffbeb;
  --fs-error: #ef4444;
  --fs-error-bg: #fef2f2;
  --fs-info: #3b82f6;
  --fs-info-bg: #eff6ff;

  /* ===================================================================
     2. TYPOGRAFIE
     =================================================================== */

  --fs-font-sans: "Varela", system-ui, -apple-system, sans-serif;
  --fs-font-mono: "Space Mono", "Courier New", monospace;
  --fs-mono: var(--fs-font-mono); /* Alias */

  /* --- Type Scale (Major Third ~1.25) --- */
  --fs-text-2xs: 0.6875rem;   /* 11px — nur fuer Labels/Badges */
  --fs-text-xs:  0.75rem;     /* 12px */
  --fs-text-sm:  0.875rem;    /* 14px */
  --fs-text-base: 1rem;       /* 16px */
  --fs-text-lg:  1.125rem;    /* 18px */
  --fs-text-xl:  1.25rem;     /* 20px */
  --fs-text-2xl: 1.5rem;      /* 24px */
  --fs-text-3xl: 1.875rem;    /* 30px */

  /* --- Font Weights --- */
  --fs-weight-normal: 400;
  --fs-weight-medium: 500;
  --fs-weight-semibold: 600;
  --fs-weight-bold: 700;

  /* --- Line Heights --- */
  --fs-leading-tight: 1.25;
  --fs-leading-normal: 1.5;
  --fs-leading-relaxed: 1.625;

  /* --- Letter Spacing --- */
  --fs-tracking-tight: -0.01em;
  --fs-tracking-normal: 0;
  --fs-tracking-wide: 0.025em;
  --fs-tracking-wider: 0.05em;

  /* ===================================================================
     3. SPACING (4px Basis-Grid)
     =================================================================== */

  --fs-space-0:  0;
  --fs-space-px: 1px;
  --fs-space-0-5: 0.125rem;  /*  2px */
  --fs-space-1:  0.25rem;    /*  4px */
  --fs-space-1-5: 0.375rem;  /*  6px */
  --fs-space-2:  0.5rem;     /*  8px */
  --fs-space-2-5: 0.625rem;  /* 10px */
  --fs-space-3:  0.75rem;    /* 12px */
  --fs-space-4:  1rem;       /* 16px */
  --fs-space-5:  1.25rem;    /* 20px */
  --fs-space-6:  1.5rem;     /* 24px */
  --fs-space-8:  2rem;       /* 32px */
  --fs-space-10: 2.5rem;     /* 40px */
  --fs-space-12: 3rem;       /* 48px */
  --fs-space-16: 4rem;       /* 64px */

  /* ===================================================================
     4. BORDER RADIUS
     =================================================================== */

  --fs-radius-none: 0;
  --fs-radius-sm:   0.25rem;   /*  4px — Inputs, kleine Elemente */
  --fs-radius-md:   0.5rem;    /*  8px — Cards, Buttons */
  --fs-radius-lg:   0.75rem;   /* 12px — Modals, grosse Cards */
  --fs-radius-xl:   1rem;      /* 16px — Bottom Sheets */
  --fs-radius-2xl:  1.5rem;    /* 24px — Mobile Bottom Sheet Top */
  --fs-radius-full: 9999px;    /* Pill-Buttons, Badges */

  /* ===================================================================
     5. SCHATTEN (Elevation System)
     =================================================================== */

  --fs-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --fs-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --fs-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --fs-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --fs-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --fs-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Focus Rings */
  --fs-ring-brand:   0 0 0 3px rgba(var(--fs-brand-rgb), 0.2);
  --fs-ring-error:   0 0 0 3px rgba(239, 68, 68, 0.2);
  --fs-ring-neutral: 0 0 0 3px rgba(0, 0, 0, 0.1);

  /* ===================================================================
     6. Z-INDEX (10er Schritte, klare Hierarchie)
     =================================================================== */

  --fs-z-base:     0;
  --fs-z-raised:   1;      /* Leicht angehobene Elemente */
  --fs-z-dropdown: 10;     /* Dropdowns, Tooltips */
  --fs-z-sticky:   20;     /* Sticky Headers, Nav */
  --fs-z-overlay:  30;     /* Overlays, Backdrops */
  --fs-z-modal:    40;     /* Modals, Dialoge */
  --fs-z-toast:    50;     /* Toasts, Notifications */

  /* ===================================================================
     7. TRANSITIONS & EASING
     =================================================================== */

  /* Durations */
  --fs-duration-instant: 75ms;
  --fs-duration-fast:    150ms;
  --fs-duration-normal:  250ms;
  --fs-duration-slow:    350ms;
  --fs-duration-slower:  500ms;

  /* Easing Curves */
  --fs-ease-default:  cubic-bezier(0.4, 0, 0.2, 1);   /* Standard (Material) */
  --fs-ease-in:       cubic-bezier(0.4, 0, 1, 1);      /* Beschleunigung */
  --fs-ease-out:      cubic-bezier(0, 0, 0.2, 1);      /* Verzoegerung */
  --fs-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);    /* Symmetrisch */
  --fs-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);  /* Bounce */
  --fs-ease-elastic:  cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Elastic */

  /* Composed Transitions */
  --fs-transition-colors:   color var(--fs-duration-fast) var(--fs-ease-default),
                             background-color var(--fs-duration-fast) var(--fs-ease-default),
                             border-color var(--fs-duration-fast) var(--fs-ease-default);
  --fs-transition-transform: transform var(--fs-duration-fast) var(--fs-ease-default);
  --fs-transition-shadow:   box-shadow var(--fs-duration-fast) var(--fs-ease-default);
  --fs-transition-opacity:  opacity var(--fs-duration-normal) var(--fs-ease-default);
  --fs-transition-all:      all var(--fs-duration-fast) var(--fs-ease-default);

  /* ===================================================================
     8. BREAKPOINTS (als Referenz — CSS Custom Properties gehen nicht in Media Queries)
     =================================================================== */

  /* Mobile:  0       – 640px   (max-width: 640px) */
  /* Tablet:  641px   – 1024px  (min-width: 641px) and (max-width: 1024px) */
  /* Desktop: 1025px+ (min-width: 1025px) */

  /* ===================================================================
     9. TOUCH TARGETS
     =================================================================== */

  --fs-touch-target-min: 44px;   /* WCAG 2.5.8 Minimum */
  --fs-touch-target-comfortable: 48px;

}

/* ==========================================================================
   COMPONENT TOKENS — Button System
   ========================================================================== */

/* --- Base Button Reset --- */
.fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-2);
  padding: var(--fs-space-2-5) var(--fs-space-4);
  min-height: var(--fs-touch-target-min);
  font-family: var(--fs-font-sans);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-semibold);
  line-height: var(--fs-leading-tight);
  letter-spacing: var(--fs-tracking-wide);
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--fs-radius-md);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: var(--fs-transition-colors), var(--fs-transition-transform), var(--fs-transition-shadow);
}

.fs-btn:active {
  transform: scale(0.97);
}

/* --- Primary (gefuellt, Brand-Farbe) --- */
.fs-btn--primary {
  background: var(--fs-brand);
  color: var(--fs-text-on-brand);
  border-color: var(--fs-brand);
}

.fs-btn--primary:hover {
  background: var(--fs-brand-hover);
  border-color: var(--fs-brand-hover);
}

.fs-btn--primary:active {
  background: var(--fs-brand-active);
  border-color: var(--fs-brand-active);
}

/* --- Secondary (outlined) --- */
.fs-btn--secondary {
  background: transparent;
  color: var(--fs-brand);
  border-color: var(--fs-brand);
}

.fs-btn--secondary:hover {
  background: rgba(var(--fs-brand-rgb), 0.06);
}

.fs-btn--secondary:active {
  background: rgba(var(--fs-brand-rgb), 0.12);
}

/* --- Ghost (minimal, kein Border) --- */
.fs-btn--ghost {
  background: transparent;
  color: var(--fs-text-secondary);
  border-color: transparent;
}

.fs-btn--ghost:hover {
  background: var(--fs-gray-100);
  color: var(--fs-text-primary);
}

.fs-btn--ghost:active {
  background: var(--fs-gray-200);
}

/* --- Danger --- */
.fs-btn--danger {
  background: var(--fs-error);
  color: var(--fs-text-on-brand);
  border-color: var(--fs-error);
}

.fs-btn--danger:hover {
  background: #dc2626;
  border-color: #dc2626;
}

/* --- Sizes --- */
.fs-btn--sm {
  padding: var(--fs-space-1-5) var(--fs-space-3);
  font-size: var(--fs-text-xs);
  min-height: 32px;
  border-radius: var(--fs-radius-sm);
}

.fs-btn--lg {
  padding: var(--fs-space-3) var(--fs-space-6);
  font-size: var(--fs-text-base);
  min-height: 52px;
  border-radius: var(--fs-radius-md);
}

/* --- Pill (rund) --- */
.fs-btn--pill {
  border-radius: var(--fs-radius-full);
}

/* --- Icon-only --- */
.fs-btn--icon {
  padding: var(--fs-space-2);
  min-width: var(--fs-touch-target-min);
}

/* --- Disabled (alle Varianten) --- */
.fs-btn:disabled,
.fs-btn[aria-disabled="true"],
.fs-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Loading --- */
.fs-btn.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.fs-btn.loading::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fs-spin 0.6s linear infinite;
  /* Reset color so spinner is visible */
  color: var(--fs-text-on-brand);
}

.fs-btn--secondary.loading::after,
.fs-btn--ghost.loading::after {
  color: var(--fs-brand);
}

/* ==========================================================================
   FOCUS STATES — Global
   ========================================================================== */

/* Entferne den Default-Outline ueberall, ersetze mit konsistentem Ring */
:focus {
  outline: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--fs-ring-brand) !important;
}

/* Buttons, Links, interaktive Elemente */
.fs-btn:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--fs-ring-brand) !important;
}

/* Inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--fs-brand);
  box-shadow: var(--fs-ring-brand);
}

/* Error-State Input Focus */
.has-error input:focus-visible,
input.error:focus-visible {
  border-color: var(--fs-error);
  box-shadow: var(--fs-ring-error);
}

/* Swatches: Keyboard-navigierbar */
label.variation:focus-visible {
  outline: none;
  box-shadow: var(--fs-ring-brand) !important;
  border-radius: var(--fs-radius-sm);
}

/* Tabs: Keyboard-Focus */
.config-form__tabs-item:focus-visible {
  outline: 2px solid var(--fs-brand);
  outline-offset: 2px;
  border-radius: var(--fs-radius-sm);
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

@keyframes fs-spin {
  to { transform: rotate(360deg); }
}

@keyframes fs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fs-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fs-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes fs-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fs-check-pop {
  0%   { transform: scale(0); opacity: 0; }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fs-glow-pulse {
  0%   { box-shadow: 0 0 0 3px var(--fs-brand), 0 0 0 6px rgba(var(--fs-brand-rgb), 0.25); }
  100% { box-shadow: 0 0 0 3px var(--fs-brand), 0 0 0 6px rgba(var(--fs-brand-rgb), 0); }
}

@keyframes fs-price-flash {
  0%   { background-color: rgba(var(--fs-brand-rgb), 0.12); }
  100% { background-color: transparent; }
}

/* Step-Completion Confetti Burst */
@keyframes fs-confetti-burst {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  50%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* Swatch selection pop — subtle scale on the container */
@keyframes fs-swatch-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Cart button ready pulse — desktop */
@keyframes fs-cart-ready-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--fs-brand-rgb), 0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(var(--fs-brand-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--fs-brand-rgb), 0); }
}

/* Input focus glow — animated ring */
@keyframes fs-focus-ring {
  0%   { box-shadow: 0 0 0 0 rgba(var(--fs-brand-rgb), 0.3); }
  100% { box-shadow: 0 0 0 3px rgba(var(--fs-brand-rgb), 0.15); }
}

/* Number tween shimmer — flash while price counts */
@keyframes fs-price-counting {
  0%   { color: var(--fs-brand); }
  50%  { color: var(--fs-brand-hover); }
  100% { color: var(--fs-brand); }
}

/* ==========================================================================
   UTILITY CLASSES (sparsam, nur was oft gebraucht wird)
   ========================================================================== */

/* Elevation */
.fs-elevation-1 { box-shadow: var(--fs-shadow-sm); }
.fs-elevation-2 { box-shadow: var(--fs-shadow-md); }
.fs-elevation-3 { box-shadow: var(--fs-shadow-lg); }
.fs-elevation-4 { box-shadow: var(--fs-shadow-xl); }

/* Animation Helpers */
.fs-animate-fade-in {
  animation: fs-fade-in var(--fs-duration-normal) var(--fs-ease-default);
}

.fs-animate-slide-up {
  animation: fs-slide-up var(--fs-duration-normal) var(--fs-ease-out);
}

.fs-animate-scale-in {
  animation: fs-scale-in var(--fs-duration-fast) var(--fs-ease-bounce);
}

.fs-animate-panel-in {
  animation: fs-panel-in var(--fs-duration-normal) var(--fs-ease-out);
}

/* Price Flash — per JS-Klasse getriggert bei Preisaenderung */
.fs-price-flash {
  animation: fs-price-flash 0.8s var(--fs-ease-out);
  border-radius: var(--fs-radius-sm);
}

/* Price Counting — per JS waehrend CountUp aktiv */
.fs-price-counting {
  animation: fs-price-counting 0.4s var(--fs-ease-default) infinite;
}

/* Stagger-Delay (fuer Kind-Elemente) */
.fs-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.fs-stagger > *:nth-child(2)  { animation-delay: 50ms; }
.fs-stagger > *:nth-child(3)  { animation-delay: 100ms; }
.fs-stagger > *:nth-child(4)  { animation-delay: 150ms; }
.fs-stagger > *:nth-child(5)  { animation-delay: 200ms; }
.fs-stagger > *:nth-child(6)  { animation-delay: 250ms; }
.fs-stagger > *:nth-child(7)  { animation-delay: 300ms; }
.fs-stagger > *:nth-child(8)  { animation-delay: 350ms; }
.fs-stagger > *:nth-child(9)  { animation-delay: 400ms; }
.fs-stagger > *:nth-child(10) { animation-delay: 450ms; }
.fs-stagger > * {
  animation-fill-mode: both;
}