// site/tokens.jsx — Tokens DA 08 "Carte à jouer" appliqués au site complet
// Palette plus claire et neutre que la DA 08 originale, pour tenir 1h+ de
// lecture sur mobile. Le rouge cardinal reste l'accent fort.

const T = {
  // Palette
  white: "#FFFFFF",         // vrai blanc, comme sur le save-the-date
  paper: "#F7F4EC",         // fond secondaire / cartes
  card: "#FFFFFF",          // cartes blanches éclatantes
  ink: "#1A1612",           // noir chaud
  inkSoft: "rgba(26,22,18,0.65)",
  inkMute: "rgba(26,22,18,0.45)",
  rouge: "#B85A4E",         // rouge aquarelle, plus rosé/terracotta
  rougeDeep: "#8C3A2E",
  rougePale: "rgba(184,90,78,0.08)",
  or: "#BE9A48",            // or — couleur du "&" du save-the-date
  orDeep: "#8E7128",
  orPale: "rgba(190,154,72,0.12)",
  sage: "#7E8F75",          // vert sauge subtil — issu de l'aquarelle
  rule: "rgba(26,22,18,0.18)",
  ruleSoft: "rgba(26,22,18,0.1)",
  shadow: "0 1px 2px rgba(26,22,18,0.04), 0 8px 24px rgba(26,22,18,0.06)",
  shadowCard: "0 2px 6px rgba(26,22,18,0.08), 0 16px 40px rgba(26,22,18,0.12)",

  // Typographies
  display: '"Italiana", "Cormorant Garamond", Georgia, serif',
  bold: '"Bodoni Moda", "Italiana", Georgia, serif',
  italic: '"Cormorant Garamond", "Bodoni Moda", Georgia, serif',
  sans: '"Manrope", system-ui, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

// CSS global (injecté une fois)
if (typeof document !== 'undefined' && !document.getElementById('site-styles')) {
  const s = document.createElement('style');
  s.id = 'site-styles';
  s.textContent = `
    html { scroll-behavior: smooth; }
    body { margin: 0; background: ${T.white}; color: ${T.ink}; font-family: ${T.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    * { box-sizing: border-box; }
    a { color: inherit; }
    img { max-width: 100%; display: block; }
    button { font-family: inherit; cursor: pointer; }
    /* Eyebrow uppercase mono — utilisé partout pour les méta */
    .eyebrow { font-family: ${T.mono}; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: ${T.orDeep}; }
    .eyebrow-small { font-family: ${T.mono}; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: ${T.inkSoft}; }
    .display { font-family: ${T.display}; font-style: italic; letter-spacing: -1px; line-height: 0.95; }
    .display-bold { font-family: ${T.bold}; font-weight: 700; letter-spacing: -1px; line-height: 0.95; }
    /* Tap targets et selection */
    ::selection { background: ${T.rouge}; color: ${T.white}; }
    /* Animations utilitaires */
    @keyframes site-up { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: translateY(0) } }
    @keyframes site-fade { from { opacity: 0 } to { opacity: 1 } }
    .anim-up { animation: site-up .8s ease both; }
    .anim-up-late { animation: site-up .8s .15s ease both; }
    /* Texture grain (utilisée via .grain) */
    .grain { position: relative; }
    .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    }
    /* Responsive: container */
    .wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
    @media (min-width: 720px) { .wrap { padding: 0 40px; } }
    /* Scroll smooth pour anchors */
    [id^="section-"] { scroll-margin-top: 80px; }
  `;
  document.head.appendChild(s);
}

Object.assign(window, { T });