/* ══════════════════════════════════════════════════════════════
   Design tokens — shared across all pages.
   Fonts, palette, typography, spacing, motion, theme overrides, reset.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Placa';
  src: url('Fonts/Placa-Mediana.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gambetta';
  src: url('Fonts/Gambetta-Regular.woff2') format('woff2'),
       url('Fonts/Gambetta-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core palette */
  --color-bg: #000000;
  --color-text: #F1EDEC;
  --color-link: #4D8BFF;
  --color-footer: #0D0D0D;
  --color-pill-bg: rgba(20, 20, 20, 0.72);
  --color-pill-border: rgba(241, 237, 236, 0.06);
  --icon-invert: 0;
  --divider-rgb: 241, 237, 236;

  /* Muted foregrounds */
  --color-muted: rgba(255, 255, 255, 0.40);

  /* Typography */
  --font-display: 'Placa', sans-serif;
  --font-body:     'Gambetta', serif;
  --font-size-hero: clamp(2.2rem, 5.5vw, 4.4rem);
  --font-size-sub:  clamp(14px, 1.5vw, 18px);
  --font-size-copy: 11px;
  --font-size-note: 14px;
  --letter-hero: 0.02em;
  --letter-sub:  0.12em;
  --letter-copy: 0.05em;

  /* Spacing scale (2px base) */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  58px;
  --space-9:  88px;

  /* Nav pill */
  --nav-gap:          15px;
  --nav-brand-gap:    19px;      /* logo → first link inside pill (mobile) */
  --nav-pill-height:  56px;
  --nav-pill-px:      22px;      /* pill inline padding */
  --nav-pill-font:    14px;
  --nav-brand-w:      42px;
  --nav-brand-h:      56px;

  /* Radii */
  --radius-pill: 9999px;

  /* Motion — named easings */
  --ease-smooth:    cubic-bezier(0.23, 1, 0.32, 1);      /* out-quint */
  --ease-sharp:     cubic-bezier(0.86, 0, 0.07, 1);      /* in-out-quart */
  --ease-in-quart:  cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out:       cubic-bezier(0.215, 0.61, 0.355, 1); /* out-cubic */
  --ease-overshoot: cubic-bezier(0.34, 1.4, 0.64, 1);    /* back-out, subtle spring */

  /* Motion — durations */
  --dur-fast:   0.2s;
  --dur-base:   0.6s;
  --dur-slow:   0.7s;
  --dur-slower: 1s;
  --dur-cinema: 4.5s;

  /* Layers */
  --z-trail-back:  1;
  --z-line:        30;
  --z-content:     31;
  --z-grain:       40;
  --z-subtitle:    50;
  --z-footer-fade: 51;
  --z-footer:      52;
  --z-trail-front: 60;

  /* Flash frame */
  --flash-w: 100px;
  --flash-h: 133px;

  /* Trail rects */
  --trail-w: 120px;
  --trail-h: 160px;
}

/* ── Light theme overrides ── */
html.theme-light {
  --color-bg: #F1EDEC;
  --color-text: #0D0D0D;
  --color-link: #0055FF;
  --color-footer: #E4DFDE;
  --color-pill-bg: rgba(241, 237, 236, 0.82);
  --color-pill-border: rgba(20, 20, 20, 0.08);
  --color-muted: rgba(20, 20, 20, 0.60);
  --icon-invert: 1;
  --divider-rgb: 20, 20, 20;
}

/* ── Reset + base ── */
html {
  transition: background-color 320ms var(--ease-out);
}

/* scroll-behavior: smooth removed — causes resistance on mobile touch scroll.
   Anchor jumps use JS scrollIntoView({ behavior: 'smooth' }) if needed. */

body {
  transition: background-color 320ms var(--ease-out),
              color 320ms var(--ease-out);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  overflow-x: hidden;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-display);
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── External link arrow ── */
a.ext-arrow::after {
  content: "\2197\FE0E";
  font-size: 0.85em;
  line-height: 1;
  margin-left: 0.1em;
  text-decoration: none;
  display: inline-block;
  transform: translateY(-0.05em);
  font-variant-emoji: text;
}

/* ── Utility ── */
.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;
}