// app/tokens.jsx — Tokens partagés pour l'app invité (cohérent avec site/)

const A = {
  white: "#FFFFFF",
  paper: "#F7F4EC",
  card: "#FFFFFF",
  ink: "#1A1612",
  inkSoft: "rgba(26,22,18,0.65)",
  inkMute: "rgba(26,22,18,0.45)",
  rouge: "#B85A4E",
  rougeDeep: "#8C3A2E",
  rougePale: "rgba(184,90,78,0.08)",
  or: "#BE9A48",
  orDeep: "#8E7128",
  orPale: "rgba(190,154,72,0.12)",
  sage: "#7E8F75",
  sageWash: "rgba(126,143,117,0.08)",
  rule: "rgba(26,22,18,0.18)",
  ruleSoft: "rgba(26,22,18,0.10)",
  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)",
  display: '"Bodoni Moda", "Italiana", Georgia, serif',
  italic: '"Cormorant Garamond", "Bodoni Moda", Georgia, serif',
  sans: '"Manrope", system-ui, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

if (typeof document !== 'undefined' && !document.getElementById('app-styles')) {
  const s = document.createElement('style');
  s.id = 'app-styles';
  s.textContent = `
    html, body { margin: 0; padding: 0; background: ${A.white}; color: ${A.ink}; font-family: ${A.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    * { box-sizing: border-box; }
    a { color: inherit; }
    button { font-family: inherit; cursor: pointer; }
    img { max-width: 100%; display: block; }
    .eyebrow { font-family: ${A.mono}; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: ${A.orDeep}; }
    .display-bold { font-family: ${A.display}; font-weight: 700; letter-spacing: -1px; line-height: 0.95; }
    .display { font-family: ${A.display}; font-style: italic; letter-spacing: -0.5px; line-height: 0.95; }
    ::selection { background: ${A.rouge}; color: ${A.white}; }
    .wrap { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 20px; }
    @keyframes a-up { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: translateY(0) } }
    @keyframes a-fade { from { opacity: 0 } to { opacity: 1 } }
    .anim-up { animation: a-up .5s ease both; }

    /* ─── Animations app : tab transitions + cascade interne ─── */
    @keyframes tab-slide-out-left  { from { transform: translateX(0); }    to { transform: translateX(-100%); } }
    @keyframes tab-slide-out-right { from { transform: translateX(0); }    to { transform: translateX(100%); } }
    @keyframes tab-slide-in-left   { from { transform: translateX(100%); } to { transform: translateX(0); } }
    @keyframes tab-slide-in-right  { from { transform: translateX(-100%); }to { transform: translateX(0); } }
    .tab-slide-out-left  { animation: tab-slide-out-left  .4s cubic-bezier(.4,0,.2,1) both; }
    .tab-slide-out-right { animation: tab-slide-out-right .4s cubic-bezier(.4,0,.2,1) both; }
    .tab-slide-in-left   { animation: tab-slide-in-left   .4s cubic-bezier(.4,0,.2,1) both; }
    .tab-slide-in-right  { animation: tab-slide-in-right  .4s cubic-bezier(.4,0,.2,1) both; }
    /* Cascade interne : enfants directs de .wrap apparaissent en séquence */
    @keyframes tab-cascade-up { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
    .wrap-cascade > * { animation: tab-cascade-up .5s cubic-bezier(.2,.7,.3,1) both; }
    .wrap-cascade > *:nth-child(1) { animation-delay: .05s; }
    .wrap-cascade > *:nth-child(2) { animation-delay: .14s; }
    .wrap-cascade > *:nth-child(3) { animation-delay: .23s; }
    .wrap-cascade > *:nth-child(4) { animation-delay: .32s; }
    .wrap-cascade > *:nth-child(5) { animation-delay: .41s; }
    .wrap-cascade > *:nth-child(6) { animation-delay: .50s; }
    .wrap-cascade > *:nth-child(7) { animation-delay: .58s; }
    .wrap-cascade > *:nth-child(8) { animation-delay: .66s; }

    /* Cartes en éventail — utilisé par la Home pour les nav cards */
    @keyframes fan-in {
      0%   { opacity: 0; transform: translateY(70px) rotate(-6deg) scale(.92); }
      60%  { opacity: 1; transform: translateY(-3px) rotate(0deg)  scale(1); }
      100% { opacity: 1; transform: translateY(0)    rotate(0deg)  scale(1); }
    }
    .fan-stack > * {
      transform-origin: bottom center;
      animation: fan-in .8s cubic-bezier(.34,1.56,.64,1) both;
      /* Annule la cascade-up héritée si parent .wrap-cascade */
    }
    .fan-stack > *:nth-child(1) { animation-delay: .25s; }
    .fan-stack > *:nth-child(2) { animation-delay: .33s; }
    .fan-stack > *:nth-child(3) { animation-delay: .41s; }
    .fan-stack > *:nth-child(4) { animation-delay: .49s; }
    .fan-stack > *:nth-child(5) { animation-delay: .57s; }
    /* Texture grain optionnel */
    .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.04;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    }
    /* Reset des boutons pour ressembler à du native */
    input, textarea, select { font-family: inherit; }
    /* Tab bar bottom */
    .tabbar { position: fixed; bottom: 0; left: 0; right: 0; background: ${A.ink}; color: ${A.white}; z-index: 50; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,0.06); }
    .tabbar-inner { display: flex; align-items: stretch; max-width: 720px; margin: 0 auto; }
    .tabbar button { flex: 1; background: transparent; border: 0; color: rgba(255,255,255,0.55); padding: 8px 4px; font-family: ${A.mono}; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: color .15s; }
    .tabbar button.active { color: ${A.or}; }
    .tabbar button:hover { color: ${A.or}; }
    .tabbar .icon { font-size: 18px; line-height: 1; font-family: ${A.display}; }
    /* Tabbar mode 7 onglets : compress labels pour tenir sur mobile */
    .tabbar-7 button { padding: 8px 2px; font-size: 8.5px; letter-spacing: 0.8px; gap: 3px; }
    .tabbar-7 .icon { font-size: 16px; }
    @media (max-width: 380px) {
      .tabbar-7 button { font-size: 7.5px; letter-spacing: 0.5px; }
      .tabbar-7 .icon { font-size: 14px; }
    }
    /* Tabbar mode 8 onglets : labels plus serrés encore, et un onglet 'highlight'
       (Anecdotes) en rouge avec un halo léger pour le mettre en avant. */
    .tabbar-8 button { padding: 8px 1px; font-size: 8px; letter-spacing: 0.4px; gap: 3px; }
    .tabbar-8 .icon { font-size: 15px; }
    .tabbar-8 button.highlight { color: ${A.rouge}; }
    .tabbar-8 button.highlight .icon {
      font-size: 21px; color: ${A.rouge};
      filter: drop-shadow(0 0 6px ${A.rouge}55);
      animation: tabbar-pulse 3.2s ease-in-out infinite;
    }
    .tabbar-8 button.highlight.active { color: ${A.or}; }
    .tabbar-8 button.highlight.active .icon { color: ${A.or}; filter: drop-shadow(0 0 6px ${A.or}88); }
    @keyframes tabbar-pulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.1); }
    }
    @media (max-width: 380px) {
      .tabbar-8 button { font-size: 7px; letter-spacing: 0.2px; gap: 2px; }
      .tabbar-8 .icon { font-size: 13px; }
      .tabbar-8 button.highlight .icon { font-size: 18px; }
    }
  `;
  document.head.appendChild(s);
}

Object.assign(window, { A });