/* ===== Design tokens (Fáze 3a) ============================================
   Sjednocené CSS proměnné pro radius, stíny, spacing, sémantické barvy.
   Migruje inline style="..." z ListingDetail.razor a dalších stránek.
   Doplňuje MudBlazor palettu, neduplikuje ji.
   ========================================================================= */

:root {
  /* Radius & elevation */
  --re-radius-sm: 6px;
  --re-radius:    12px;
  --re-radius-lg: 16px;
  --re-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --re-shadow:    0 2px 8px rgba(0, 0, 0, .08);
  --re-shadow-lg: 0 6px 20px rgba(0, 0, 0, .10);

  /* Spacing */
  --re-spacing-xs: 4px;
  --re-spacing-sm: 8px;
  --re-spacing-md: 16px;
  --re-spacing-lg: 24px;
  --re-spacing-xl: 32px;
  --re-spacing-card: 16px;

  /* Sémantické barvy */
  --re-color-price-low:    #2e7d32;
  --re-color-price-mid:    #f9a825;
  --re-color-price-high:   #d32f2f;
  --re-color-success-bg:   #e8f5e9;
  --re-color-warning-bg:   #fff3e0;
  --re-color-error-bg:     #ffebee;
  --re-color-info-bg:      #e3f2fd;

  /* Status (user_listing_states) */
  --re-status-tovisit:   #1976d2;
  --re-status-liked:     #e91e63;
  --re-status-visited:   #388e3c;
  --re-status-disliked:  #757575;

  /* Listing card */
  --re-card-bg: var(--mud-palette-surface);
  --re-card-border: rgba(0, 0, 0, .08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --re-shadow:    0 2px 8px rgba(0, 0, 0, .35);
    --re-shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
    --re-shadow-lg: 0 6px 20px rgba(0, 0, 0, .45);
    --re-color-success-bg: rgba(46, 125, 50, .15);
    --re-color-warning-bg: rgba(249, 168, 37, .15);
    --re-color-error-bg:   rgba(211, 47, 47, .15);
    --re-color-info-bg:    rgba(25, 118, 210, .15);
    --re-card-border: rgba(255, 255, 255, .08);
  }
}

@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;
  }
}

/* ===== Skip-to-content link (a11y, WCAG 2.4.1) ============================ */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
  border-radius: var(--re-radius-sm);
  text-decoration: none;
  font-weight: 600;
}
.skip-to-content:focus {
  left: 8px;
}

/* ===== Section card (komponentu obaluje, pro vizuální konzistenci) ========= */
.section-card {
  border-radius: var(--re-radius);
  box-shadow: var(--re-shadow-sm);
  border: 1px solid var(--re-card-border);
}

/* ===== Listing card "seen" indikátor ===================================== */
.listing-card {
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.listing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--re-shadow-md);
}
.listing-card[data-seen="true"] {
  opacity: 0.75;
}
.listing-card[data-seen="true"]::after {
  content: "👁";
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 2;
}
.listing-card[data-status="liked"]    { border-left: 4px solid var(--re-status-liked); }
.listing-card[data-status="tovisit"]  { border-left: 4px solid var(--re-status-tovisit); }
.listing-card[data-status="visited"]  { border-left: 4px solid var(--re-status-visited); }
.listing-card[data-status="disliked"] { border-left: 4px solid var(--re-status-disliked); }

/* ===== Focus ring (a11y, WCAG 2.4.7) ====================================== */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.mud-button-root:focus-visible {
  outline: 2px solid var(--mud-palette-primary);
  outline-offset: 2px;
}