/* ─────────────────────────────────────────────
   WeddingFolio-26 — design tokens
   Source of truth: Figma "Malo Perso — Draft"
───────────────────────────────────────────── */

@font-face {
  font-family: "Denver-Serial";
  src: url("../fonts/Denver-Serial/Denver-Serial-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Denver-Serial";
  src: url("../fonts/Denver-Serial/Denver-Serial-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Denver-Serial";
  src: url("../fonts/Denver-Serial/Denver-Serial-RegularItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Denver-Serial";
  src: url("../fonts/Denver-Serial/Denver-Serial-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Blanco";
  src: url("../fonts/Blanco/Blanco-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Blanco";
  src: url("../fonts/Blanco/Blanco-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Blanco";
  src: url("../fonts/Blanco/Blanco-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Blanco";
  src: url("../fonts/Blanco/Blanco-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Apercu Mono Pro";
  src: url("../fonts/Apercu Mono/ApercuMonoProLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Apercu Mono Pro";
  src: url("../fonts/Apercu Mono/ApercuMonoProRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Apercu Mono Pro";
  src: url("../fonts/Apercu Mono/ApercuMonoProMedium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Apercu Mono Pro";
  src: url("../fonts/Apercu Mono/ApercuMonoProBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Typefaces ---- */
  --font-display: "Denver-Serial", ui-serif, "Times New Roman", serif;
  --font-editorial: "Blanco", ui-serif, Georgia, serif;
  --font-mono: "Apercu Mono Pro", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Palette ---- */
  --color-ink: #070707;
  --color-ink-soft: #3a3a3a;
  --color-paper: #e9e0d5;
  --color-paper-text: #e9e0d5;
  --color-paper-muted: rgba(233, 224, 213, 0.5);

  --color-videos: #956ea1;
  --color-videos-deep: #88638f;
  --color-photos: #a1856e;
  --color-story: #0a0822;

  --color-bg: #ffffff;

  /* ---- Spacing scale (8px base grid, matches Figma gaps) ---- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.2rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 2.5rem;   /* 40px */
  --space-8: 4.5rem;   /* 72px */
  --space-9: 5rem;     /* 96px */

  /* ---- Type scale (desktop; fluid-clamped, see base.css) ----
     Clean 2px/4px-step scale: 12 · 14 · 16 · 18 · 20 · 24 · 28 · 40 · 72 */
  --text-display-xl: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);      /* logo / couple name — 40px → 72px */
  --text-display-l: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);    /* OUR MENU / soundtrack heading — 28px → 40px */
  --text-editorial-l: clamp(1.3rem, 1.1rem + 0.6vw, 1.5rem);  /* subtitle / tagline — 20px → 24px */
  --text-editorial-m: 1rem;                                    /* body paragraphs — 16px */
  --text-editorial-body: clamp(1.125rem, 1rem + 0.4vw, 1.25rem); /* story long copy — 18px → 20px */
  --text-italic-s: 1rem;                                       /* filmmaker & photographer — 16px */
  --text-mono-m: 1rem;                                         /* nav / couple names — 16px */
  --text-mono-s: 0.75rem;                                      /* index labels — 12px */

  /* ---- Motion ---- */
  --ease-editorial: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-medium: 420ms;
}