/* ════════════════════════════════════════════════
   kryptonite-galleries — tokens
   Repris de « PAULO JANEIRO WEBSITE/styles.css » (racine du site, lignes 7-18, 1153-1169) :
   même palette encre/papier, mêmes polices, même unité de rythme — pour que la galerie se
   sente comme une page du site plutôt que comme un outil tiers greffé dessus.
   Polices auto-hébergées en woff2 (variable) : Space Grotesk (axe 300-700) et Inter (axe
   100-900), sous licence OFL, subset latin. Google ne sert pas de variante 800 statique pour
   Space Grotesk (la famille s'arrête à 700 Bold) : les déclarations font-weight:800 du site
   d'origine se résolvent donc sur le fichier variable à son poids le plus fort (700).
   ════════════════════════════════════════════════ */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #ffffff;
  --fg: #000000;
  --muted: #505050;
  --border: #000000;
  --border-soft: #e0e0e0;
  --f-disp: "Space Grotesk", Helvetica, Arial, sans-serif;
  --f-body: "Inter", Helvetica, Arial, sans-serif;
  --content-pad: 80px;
  --header-h: 130px;
  --header-h-mobile: 80px;
  --tabbar-h: 48px;
  --expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Tokens propres à la galerie (pas de contrepartie dans styles.css) */
  --tile-gap: 6px;
  --tile-gap-mobile: 4px;
  --scrim-strong: rgba(0, 0, 0, 0.7);
  --scrim-soft: rgba(0, 0, 0, 0.2);
  --frame-line: rgba(255, 255, 255, 0.7);
  --focus-ring: #000000;
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 550ms;
}

@media (max-width: 1024px) {
  :root { --content-pad: 40px; }
}

@media (max-width: 768px) {
  :root { --content-pad: 20px; --header-h: var(--header-h-mobile); }
}

/* ─── RESET (styles.css:20-32) ─────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img, video { max-width: 100%; display: block; }
button, input { font-family: inherit; }
button { border: none; background: none; color: inherit; cursor: pointer; }
ul { list-style: none; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Bloc global de repli : tout ce qui bouge dans gallery.css doit être annulable ici. */
@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;
  }
}