/* Modern Bold -  high-contrast dark theme, large geometric sans display type,
   a saturated red-orange accent used sparingly (credit line, toast) rather
   than as a wash across the whole page. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
}

[data-theme="modern-bold"] {
  --serif: 'Space Grotesk', sans-serif;
  --label: 'Space Grotesk', sans-serif;
  --sans: 'Inter', sans-serif;
  --ink: #ffffff;
  --paper: #0e0e10;
  --muted: #ff4d3d;

  --hero-overlay: rgba(0, 0, 0, .3);
  --hero-fg: #fff;
  --hero-cta-border: rgba(255, 77, 61, .8);

  --toolbar-bg: #0e0e10;
  --toolbar-border: #232326;

  --gallery-placeholder-bg: #1a1a1d;

  --lightbox-bg: #0e0e10;
  --lightbox-border: #232326;
  --lightbox-caption: rgba(255, 255, 255, .55);

  --slideshow-bg: #000;
  --slideshow-control-bg: rgba(255, 255, 255, .12);
  --slideshow-control-fg: #fff;

  --toast-bg: #ff4d3d;
  --toast-fg: #fff;

  /* --ink is the light color here (dark-mode theme) -  swap back so the
     login screen still lands on a dark background instead of inverting
     into a jarring light one. */
  --login-bg: var(--paper);
  --login-fg: var(--ink);
}

[data-theme="modern-bold"] .hero__title {
  font-weight: 700;
  letter-spacing: -1.5px;
  text-transform: uppercase;
}

[data-theme="modern-bold"] .hero__cta:hover {
  background: #ff4d3d;
  border-color: #ff4d3d;
  color: #fff;
}

[data-theme="modern-bold"] .toolbar__title h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}