/*
  Bureau Paradis brand tokens.
  Colors and fonts are the official values from BP_Brand_Book_2026.pdf
  (Logo Guideline v.01, July 2026), confirmed by pixel-sampling the
  rendered swatches — not re-derived or approximated.

  Brand book name -> token:
    Deep Navy Blue #193963  -> --bp-navy
    Orange         #B95118  -> --bp-copper   (kept old var name to avoid a
    Olive Green    #7B8D3E  -> --bp-moss      site-wide rename; same hue)
    Deep Burgundy  #4E0000  -> --bp-maroon
    Soft Blush Beige #E9D4C3 -> --bp-beige (the neutral paper/ink tone)

  Typeface is Roboto (site-wide), a deliberate departure from the brand
  book's Poppins spec — kept as one family rather than mixing two, so
  weight/spacing stays consistent everywhere the tokens are used.
*/
:root {
  --bp-copper: #b95118;
  --bp-copper-dark: #56260b;
  --bp-copper-tint: #ed9e73;
  --bp-moss: #7b8d3e;
  --bp-moss-dark: #373f1c;
  --bp-moss-tint: #becd8d;
  --bp-navy: #193963;
  --bp-navy-light: #255594;
  --bp-navy-tint: #e9d4c3; /* on a navy dark-mode page, beige is the readable tint */
  --bp-maroon: #4e0000;
  --bp-maroon-light: #810000;
  --bp-maroon-tint: #cf2c2c;
  --bp-beige: #e9d4c3;

  /* RGB triplets of the four pillar colors (+ their dark-mode tints), for
     effects that need rgba() with a variable alpha — e.g. .spotlight-card's
     cursor glow. Keep these in sync with the hex values above by hand. */
  --bp-copper-rgb: 185, 81, 24;
  --bp-copper-tint-rgb: 237, 158, 115;
  --bp-moss-rgb: 123, 141, 62;
  --bp-moss-tint-rgb: 190, 205, 141;
  --bp-navy-rgb: 25, 57, 99;
  --bp-navy-tint-rgb: 233, 212, 195;
  --bp-maroon-rgb: 78, 0, 0;
  --bp-maroon-tint-rgb: 207, 44, 44;

  --bp-paper: #e9d4c3;
  --bp-paper-raised: #e1c4ad;
  --bp-ink: #193963;
  --bp-ink-soft: #607896;
  --bp-line: rgba(25, 57, 99, 0.18);

  --bp-font-display: "Roboto", "Arial", sans-serif;
  --bp-font-body: "Roboto", "Arial", sans-serif;
  --bp-font-mono: "Roboto", "Arial", sans-serif;

  --bp-radius: 2px;
  --bp-container: 72rem;

  /* Each site sets --bp-accent / --bp-accent-dark / --bp-accent-text / --bp-accent-rgb to one pillar color. */
  --bp-accent: var(--bp-navy);
  --bp-accent-dark: var(--bp-navy-light);
  --bp-accent-text: var(--bp-navy);
  --bp-accent-rgb: var(--bp-navy-rgb);

  /* Fixed (non-adaptive) tone for text sitting on a solid accent fill,
     e.g. buttons and the active nav pill — the fill itself doesn't change
     between light/dark mode, so its text color shouldn't either. This is
     the brand book's own pairing: beige reads on every accent color. */
  --bp-on-accent: #e9d4c3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bp-paper: #193963;
    --bp-paper-raised: #204980;
    --bp-ink: #e9d4c3;
    --bp-ink-soft: #bba08b;
    --bp-line: rgba(233, 212, 195, 0.22);
    --bp-accent-text: var(--bp-navy-tint);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  background: var(--bp-paper);
  color: var(--bp-ink);
  font-family: var(--bp-font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--bp-font-display);
  font-weight: 900;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
}

a {
  color: inherit;
}

.eyebrow {
  font-family: var(--bp-font-mono);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bp-accent-text);
}

.container {
  max-width: var(--bp-container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

:focus-visible {
  outline: 2px solid var(--bp-accent-text);
  outline-offset: 3px;
}

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

/* Shared motion primitives. `fade-up` / `line-up` are entrance keyframes each
   page wires up on its own hero elements with its own delays. `.reveal` /
   `.reveal-group` are the scroll-reveal contract used with <ScrollReveal />:
   elements are fully visible by default (no-JS / IO-unsupported fallback),
   and only hidden once that component's script confirms IntersectionObserver
   support and arms the group. */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes line-up {
  to {
    transform: translateY(0);
  }
}

.reveal {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}

.reveal-group.is-armed .reveal {
  opacity: 0;
  transform: translateY(18px);
}

.reveal-group.is-armed .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Cursor-spotlight glow, wired up by <Spotlight />: each page adds its own
   padding/background/border-radius on top of `.spotlight-card` (layout
   varies per site), this just owns the glow mechanics and the accent color,
   which follows --bp-accent-rgb so it's correct on every house automatically. */
.spotlight-card {
  position: relative;
  overflow: hidden;
}

.spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 180px at var(--mx, 50%) var(--my, 50%),
    rgba(var(--bp-accent-rgb), 0.16),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.spotlight-card:hover::before {
  opacity: 1;
}