/* TÈMPORA — design tokens · v2 «modern editorial» ----------------------- */
@font-face { font-family: 'DM Sans'; src: url('../assets/fonts/dm-sans-latin-300-normal.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../assets/fonts/dm-sans-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Syne'; src: url('../assets/fonts/syne-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Syne'; src: url('../assets/fonts/syne-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Syne'; src: url('../assets/fonts/syne-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  /* palette — white pages, ink type, pink as the only accent */
  --pearl: #f5f2ed;      /* blanco perla: home only */
  --white: #ffffff;
  --ivory: #ffffff;      /* page background (kept name for compatibility) */
  --porcelain: #f6f6f4;  /* subtle UI surface */
  --sand: #efeeeb;       /* image placeholder */
  --ink: #111111;
  --pink: #ff6aa9;       /* rosa chicle: frames, big phrases, hover */
  --pink-deep: #d6287f;  /* small pink text on white (AA) */
  --pink-soft: #ffe1ef;
  --bordeaux: #111111;   /* legacy accent → ink */
  --bordeaux-deep: #111111;
  --gold: #111111;       /* legacy metal accent → ink */
  --gold-soft: #ff6aa9;
  --beige: #d9d7d3;
  --nude: #c9a991;
  --arena: #b89c7a;
  --taupe: #8a8782;
  --cocoa: #3a3a3a;
  --chocolate: #111111;

  --text: var(--ink);
  --text-2: #4d4d4d;
  --text-3: #8a8a8a;
  --line: rgba(17, 17, 17, 0.1);
  --line-strong: rgba(17, 17, 17, 0.28);
  --bg: var(--white);

  /* type */
  --f-ui: 'DM Sans', 'Helvetica Neue', Inter, system-ui, sans-serif;
  --f-display: 'Instrument Serif', 'Playfair Display', Georgia, serif;
  --f-accent: 'Instrument Serif', Georgia, serif;   /* used in italic */
  --f-bold: 'Syne', 'DM Sans', system-ui, sans-serif; /* daring statements */

  --fs-micro: 0.6875rem;
  --fs-small: 0.8125rem;
  --fs-body: 0.9375rem;
  --fs-lead: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
  --fs-h2: clamp(2.4rem, 1.5rem + 3.4vw, 4.8rem);
  --fs-h1: clamp(3.2rem, 1.6rem + 6vw, 8rem);
  --fs-mega: clamp(4.5rem, 2rem + 11vw, 14rem);
  --track-label: 0.14em;

  /* space & layout */
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3.75rem);
  --section: clamp(5rem, 3rem + 8vw, 11rem);
  --max: 1560px;
  --header-h: 68px;
  --bar-h: 28px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 200ms;
  --t-med: 480ms;
  --t-slow: 1000ms;

  --radius: 0px;
  --shadow-soft: 0 24px 48px -28px rgba(17, 17, 17, 0.28);
}

@media (max-width: 760px) {
  :root { --header-h: 58px; --bar-h: 26px; }
}