/* =======================================================================
   JRB HOLIDAY - Foundation CSS (Batch A)
   -----------------------------------------------------------------------
   PROTECTION CONTRACT:
   - Does NOT redefine legacy tokens (--jrb-color-*, --bg-*, --text-*,
     --accent-*, --radius-*, --font-*). Those stay in design-system.css
     and style.css for verified pages (batches 1-8).
   - All new semantic tokens live ONLY inside [data-theme="light"] /
     [data-theme="dark"]. Pages without data-theme are unaffected.
   - All component rules are scoped: [data-theme="light"] ... or
     [data-theme="dark"] ... . No bare .card / .btn / body / h1 rules.
   - Shared utilities use the jrb-ui-* namespace to avoid Bootstrap and
     legacy collisions (.container, .card etc. are NOT redefined).
   - Accent is restrained warm gold #CFA50F. No cyan/purple dominant use.
   IMPORT ORDER (when wired in Batch B+):
     design-system.css -> style.css -> foundation.css
   ======================================================================= */

/* ============================================
   1. TOKENS - Light (approved, exact values)
   ============================================ */
[data-theme="light"] {
  --jrb-ui-accent: #CFA50F;
  --jrb-ui-accent-hover: #D4A80F;
  --jrb-ui-accent-soft: #F5E6C0;
  --jrb-ui-on-accent: #1A1A10;
  --jrb-ui-surface: #F8F9FA;
  --jrb-ui-surface-elevated: #FFFFFF;
  --jrb-ui-text: #212525;
  --jrb-ui-text-muted: #6C757D;
  --jrb-ui-border: #DEE6E9;
}

/* ============================================
   1b. TOKENS - Dark (cinematic, deep charcoal)
   Gold accent shared, restrained in both themes.
   ============================================ */
[data-theme="dark"] {
  --jrb-ui-accent: #CFA50F;
  --jrb-ui-accent-hover: #D4A80F;
  --jrb-ui-accent-soft: #F5E6C0;
  --jrb-ui-on-accent: #1A1A10;
  --jrb-ui-dark-bg: #0d0d14;
  --jrb-ui-dark-surface: #1a1a24;
  --jrb-ui-dark-surface-elevated: #252535;
  --jrb-ui-dark-text: #e0e0e5;
  --jrb-ui-dark-text-muted: #7a7a8a;
  --jrb-ui-dark-border: #3a3a4a;
}

/* ============================================
   2+3. THEME BASE (light / dark)
   Reuses --jrb-font-body, spacing scale via fallbacks.
   ============================================ */
[data-theme="light"] body {
  background-color: var(--jrb-ui-surface);
  color: var(--jrb-ui-text);
  font-family: var(--jrb-font-body, 'Inter', system-ui, sans-serif);
}

[data-theme="dark"] body {
  background-color: var(--jrb-ui-dark-bg);
  color: var(--jrb-ui-dark-text);
  font-family: var(--jrb-font-body, 'Inter', system-ui, sans-serif);
}

/* ============================================
   4. TYPOGRAPHY - theme-aware color only.
   Sizes reuse existing --jrb-text-* scale (not duplicated).
   ============================================ */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: var(--jrb-ui-text);
  line-height: 1.2;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--jrb-ui-dark-text);
  line-height: 1.2;
}

[data-theme="light"] p { color: var(--jrb-ui-text-muted); }
[data-theme="dark"] p { color: var(--jrb-ui-dark-text-muted); }

[data-theme="light"] a { color: var(--jrb-ui-text-muted); text-decoration: none; }
[data-theme="light"] a:hover,
[data-theme="light"] a:focus-visible { color: var(--jrb-ui-accent); }

[data-theme="dark"] a { color: var(--jrb-ui-dark-text-muted); text-decoration: none; }
[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus-visible { color: var(--jrb-ui-accent); }

[data-theme="light"] p a,
[data-theme="dark"] p a {
  color: var(--jrb-ui-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================
   5. COMPONENTS - all scoped, no bare selectors.
   Spacing / radius / shadow / motion reuse existing
   --jrb-space-*, --jrb-radius-*, --jrb-shadow-*,
   --jrb-motion-*, --jrb-ease-* with fallbacks.
   ============================================ */

/* Buttons - light */
[data-theme="light"] .jrb-button,
[data-theme="light"] .btn {
  background-color: var(--jrb-ui-accent);
  color: var(--jrb-ui-on-accent);
  border: 1px solid transparent;
  border-radius: var(--jrb-radius-full, 999px);
  padding: 0.6rem 1.25rem;
  font-size: var(--jrb-text-button, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--jrb-motion-fast, 150ms) var(--jrb-ease-standard, ease),
    transform var(--jrb-motion-fast, 150ms) var(--jrb-ease-standard, ease);
}
[data-theme="light"] .jrb-button:hover,
[data-theme="light"] .btn:hover { background-color: var(--jrb-ui-accent-hover); }
[data-theme="light"] .jrb-button:active,
[data-theme="light"] .btn:active { transform: scale(0.98); }

/* Buttons - dark */
[data-theme="dark"] .jrb-button,
[data-theme="dark"] .btn {
  background-color: var(--jrb-ui-accent);
  color: var(--jrb-ui-on-accent);
  border: 1px solid transparent;
  border-radius: var(--jrb-radius-full, 999px);
  padding: 0.6rem 1.25rem;
  font-size: var(--jrb-text-button, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--jrb-motion-fast, 150ms) var(--jrb-ease-standard, ease),
    transform var(--jrb-motion-fast, 150ms) var(--jrb-ease-standard, ease);
}
[data-theme="dark"] .jrb-button:hover,
[data-theme="dark"] .btn:hover { background-color: var(--jrb-ui-accent-hover); }
[data-theme="dark"] .jrb-button:active,
[data-theme="dark"] .btn:active { transform: scale(0.98); }

/* Cards - light */
[data-theme="light"] .card,
[data-theme="light"] .jrb-card {
  background-color: var(--jrb-ui-surface-elevated);
  border: 1px solid var(--jrb-ui-border);
  border-radius: var(--jrb-radius-md, 12px);
  transition: box-shadow var(--jrb-motion-standard, 200ms) var(--jrb-ease-emphasis, ease),
    border-color var(--jrb-motion-standard, 200ms) var(--jrb-ease-emphasis, ease);
}
[data-theme="light"] .card:hover,
[data-theme="light"] .jrb-card:hover { box-shadow: var(--jrb-shadow-md, 0 8px 24px rgba(0,0,0,.28)); }

/* Cards - dark */
[data-theme="dark"] .card,
[data-theme="dark"] .jrb-card {
  background-color: var(--jrb-ui-dark-surface-elevated);
  border: 1px solid var(--jrb-ui-dark-border);
  border-radius: var(--jrb-radius-md, 12px);
  transition: box-shadow var(--jrb-motion-standard, 200ms) var(--jrb-ease-emphasis, ease),
    border-color var(--jrb-motion-standard, 200ms) var(--jrb-ease-emphasis, ease);
}
[data-theme="dark"] .card:hover,
[data-theme="dark"] .jrb-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  border-color: var(--jrb-ui-accent);
}

/* Focus - scoped only (never global *:focus-visible) */
[data-theme="light"] :focus-visible,
[data-theme="dark"] :focus-visible {
  outline: 2px solid var(--jrb-ui-accent);
  outline-offset: 2px;
}

/* Skip link - namespaced, does not collide */
.jrb-ui-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.jrb-ui-skip-link:focus,
.jrb-ui-skip-link:focus-visible {
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  padding: 12px 16px;
  background-color: var(--jrb-ui-accent, #CFA50F);
  color: var(--jrb-ui-on-accent, #1A1A10);
  z-index: 100;
}

/* ============================================
   6. RESPONSIVE - namespaced container only.
   Does NOT redefine Bootstrap .container.
   ============================================ */
.jrb-ui-container {
  width: 100%;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 16px;
  padding-left: 16px;
}
@media (min-width: 768px) {
  .jrb-ui-container { max-width: 1440px; padding-right: 20px; padding-left: 20px; }
}
@media (min-width: 1200px) {
  .jrb-ui-container { max-width: 1600px; }
}

/* ============================================
   7. MOTION - reuse existing motion/ease tokens.
   No new timing tokens introduced.
   ============================================ */
[data-theme="light"] .jrb-ui-transition,
[data-theme="dark"] .jrb-ui-transition {
  transition: background-color var(--jrb-motion-standard, 200ms) var(--jrb-ease-emphasis, ease),
    color var(--jrb-motion-standard, 200ms) var(--jrb-ease-emphasis, ease),
    border-color var(--jrb-motion-standard, 200ms) var(--jrb-ease-emphasis, ease),
    box-shadow var(--jrb-motion-standard, 200ms) var(--jrb-ease-emphasis, ease);
}

/* ============================================
   8. ACCESSIBILITY - reduced motion + forced colors.
   Complements design-system.css, does not weaken it.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] *,
  [data-theme="light"] *::before,
  [data-theme="light"] *::after,
  [data-theme="dark"] *,
  [data-theme="dark"] *::before,
  [data-theme="dark"] *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-theme="light"] .jrb-ui-card-3d,
  [data-theme="dark"] .jrb-ui-card-3d { transform: none !important; }
}

@media (forced-colors: active) {
  [data-theme="light"] .jrb-button,
  [data-theme="light"] .btn,
  [data-theme="dark"] .jrb-button,
  [data-theme="dark"] .btn {
    border: 1px solid ButtonText;
  }
}

/* ============================================
   9. IMAGES - namespaced aspect utilities.
   No global img reset (verified pages untouched).
   ============================================ */
.jrb-ui-aspect-16x9 { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.jrb-ui-aspect-4x3 { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.jrb-ui-aspect-1x1 { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.jrb-ui-aspect-16x9 img,
.jrb-ui-aspect-4x3 img,
.jrb-ui-aspect-1x1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-theme="dark"] .jrb-ui-aspect-16x9 img,
[data-theme="dark"] .jrb-ui-aspect-4x3 img {
  filter: grayscale(5%) contrast(1.05);
}

/* ============================================
   10. 3D - lightweight primitives only.
   No WebGL dependency. GPU-friendly (transform only).
   Carousel itself is Batch B+, not implemented here.
   ============================================ */
.jrb-ui-perspective { perspective: 1000px; perspective-origin: 50% 50%; overflow: hidden; }
.jrb-ui-card-3d {
  transform-style: preserve-3d;
  transition: transform var(--jrb-motion-slow, 320ms) var(--jrb-ease-emphasis, ease);
}
@media (prefers-reduced-motion: no-preference) {
  [data-theme="light"] .jrb-ui-perspective:hover .jrb-ui-card-3d,
  [data-theme="dark"] .jrb-ui-perspective:hover .jrb-ui-card-3d {
    transform: translateZ(4px) translateX(2px) rotateY(2deg);
  }
}
.jrb-ui-dots { display: flex; gap: 8px; justify-content: center; }
.jrb-ui-dots button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 0.75rem;
}
[data-theme="light"] .jrb-ui-dots button { color: var(--jrb-ui-text-muted); }
[data-theme="dark"] .jrb-ui-dots button { color: var(--jrb-ui-dark-text-muted); }
[data-theme="light"] .jrb-ui-dots button:hover,
[data-theme="light"] .jrb-ui-dots button:focus-visible,
[data-theme="dark"] .jrb-ui-dots button:hover,
[data-theme="dark"] .jrb-ui-dots button:focus-visible { color: var(--jrb-ui-accent); }