// admin-app/tokens.jsx — Tokens + CSS global de l'admin pilotage

const AD = {
  white: "#FFFFFF",
  paper: "#F7F4EC",
  paperDeep: "#EFEAD9",
  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)",
  sagePale: "rgba(126,143,117,0.16)",
  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)",
  display: '"Bodoni Moda", Georgia, serif',
  italic: '"Cormorant Garamond", Georgia, serif',
  sans: '"Manrope", system-ui, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

if (typeof document !== "undefined" && !document.getElementById("admin-styles")) {
  const s = document.createElement("style");
  s.id = "admin-styles";
  s.textContent = `
    html, body { margin: 0; padding: 0; background: ${AD.paper}; color: ${AD.ink}; font-family: ${AD.sans}; -webkit-font-smoothing: antialiased; }
    * { box-sizing: border-box; }
    a { color: inherit; }
    button { font-family: inherit; cursor: pointer; }
    .eyebrow { font-family: ${AD.mono}; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: ${AD.orDeep}; font-weight: 600; }
    .display-bold { font-family: ${AD.display}; font-weight: 700; letter-spacing: -0.5px; }
    .display-italic { font-family: ${AD.display}; font-style: italic; }
    .italic { font-family: ${AD.italic}; font-style: italic; }
    .mono { font-family: ${AD.mono}; }
    ::selection { background: ${AD.or}; color: ${AD.ink}; }

    /* Anim entrée */
    @keyframes ad-up { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
    @keyframes ad-fade { from { opacity: 0 } to { opacity: 1 } }
    .ad-up { animation: ad-up .4s cubic-bezier(.2,.7,.3,1) both; }

    /* Bouton standard */
    .btn { padding: 9px 16px; border: 1.5px solid ${AD.ink}; background: ${AD.white}; color: ${AD.ink}; font-family: ${AD.mono}; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all .15s; }
    .btn:hover { background: ${AD.ink}; color: ${AD.white}; }
    .btn.primary { background: ${AD.ink}; color: ${AD.white}; }
    .btn.primary:hover { background: ${AD.rouge}; border-color: ${AD.rouge}; }
    .btn.gold { background: ${AD.or}; color: ${AD.ink}; border-color: ${AD.or}; }
    .btn.gold:hover { background: ${AD.orDeep}; border-color: ${AD.orDeep}; color: ${AD.white}; }
    .btn.danger { border-color: ${AD.rouge}; color: ${AD.rouge}; }
    .btn.danger:hover { background: ${AD.rouge}; color: ${AD.white}; }
    .btn.sm { padding: 5px 10px; font-size: 9px; letter-spacing: 1.2px; }

    /* Inputs */
    input[type=text], input[type=email], input[type=tel], textarea, select {
      font-family: ${AD.sans}; font-size: 13px; padding: 8px 11px;
      background: ${AD.white}; color: ${AD.ink};
      border: 1px solid ${AD.ruleSoft}; outline: none;
      transition: border-color .15s;
    }
    input:focus, textarea:focus, select:focus { border-color: ${AD.or}; }

    /* Scrollbar discrète */
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: ${AD.paper}; }
    ::-webkit-scrollbar-thumb { background: ${AD.ruleSoft}; border-radius: 5px; }
    ::-webkit-scrollbar-thumb:hover { background: ${AD.inkMute}; }
  `;
  document.head.appendChild(s);
}

Object.assign(window, { AD });