/* global */
/* Système de design PARTAGÉ du portail revendeur French Kits.
   Tokens (polices + couleurs) lus depuis window.PORTAIL_CONFIG.theme (config/portail.php),
   + primitives de style réutilisables (boutons, titres, prix, eyebrow, badges…).
   Tout le front partagé (header, barre de commande, pages) lit window.EcUI → cohérence + 1 seul point de modification. */
(function () {
  const th = (window.PORTAIL_CONFIG && window.PORTAIL_CONFIG.theme) || {};
  const c = th.colors || {};

  const T = {
    serif: th.font_serif || "'Playfair Display', serif",
    sans: th.font_sans || "'Hanken Grotesk', sans-serif",
    ink: c.ink || 'oklch(0.255 0.016 48)',
    primary: c.primary || 'oklch(0.62 0.14 40)',
    probar: c.probar || 'oklch(0.5 0.12 38)',
    coral: c.coral || 'oklch(0.575 0.125 42)',
    warm: c.warm || 'oklch(0.92 0.045 72)',
    warm2: c.warm2 || 'oklch(0.935 0.038 72)',
    cream: c.cream || 'oklch(0.945 0.016 82)',
    card: c.card || 'oklch(0.965 0.012 84)',
    border: c.border || 'oklch(0.88 0.012 75)',
    mute: c.mute || 'oklch(0.55 0.012 65)',
    green: c.green || 'oklch(0.6 0.12 150)',
    onbar: c.onbar || 'oklch(0.95 0.03 65)',
    text2: 'oklch(0.44 0.015 55)',   // paragraphes
    title: 'oklch(0.28 0.016 48)',   // titres sombres
  };

  // Boutons (3 variantes cohérentes) — primary = terracotta (nouvelle charte)
  function btn(variant) {
    const base = { fontFamily: T.sans, fontWeight: 600, borderRadius: 999, cursor: 'pointer', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9, border: 'none' };
    if (variant === 'ghost') return Object.assign({}, base, { background: 'transparent', color: T.ink, border: '1.5px solid oklch(0.8 0.014 70)', fontSize: 15.5, padding: '15px 28px' });
    if (variant === 'coral') return Object.assign({}, base, { background: T.coral, color: '#fff', fontSize: 15.5, padding: '16px 30px' });
    // primary (terracotta) par défaut
    return Object.assign({}, base, { background: T.primary, color: '#fff', fontSize: 15.5, padding: '16px 30px' });
  }

  // Typographie
  const eyebrow = { fontSize: 12.5, fontWeight: 600, letterSpacing: '.2em', color: T.coral, textTransform: 'uppercase' };
  const h1 = { fontFamily: T.serif, fontWeight: 600, fontSize: 80, lineHeight: 0.98, letterSpacing: '-.015em', margin: 0 };
  const h2 = { fontFamily: T.serif, fontWeight: 600, fontSize: 52, lineHeight: 1.02, letterSpacing: '-.015em', margin: 0 };
  const h3 = { fontFamily: T.serif, fontWeight: 500, fontSize: 24, lineHeight: 1.1, color: 'oklch(0.27 0.016 48)', margin: 0 };
  const para = { fontSize: 16, lineHeight: 1.6, color: T.text2, margin: 0 };
  const price = { fontFamily: T.serif, fontSize: 23, lineHeight: 1, color: T.title };
  const quote = { fontFamily: T.serif, fontStyle: 'italic', fontWeight: 500, fontSize: 34, lineHeight: 1.4, textAlign: 'center', color: 'oklch(0.32 0.016 50)', margin: 0 };
  const badge = (kind) => ({
    fontSize: 10.5, fontWeight: 700, letterSpacing: '.1em', padding: '6px 12px', borderRadius: 7, color: '#fff',
    background: kind === 'best' ? T.primary : T.coral,
  });
  // serif inline helper
  const serif = (extra) => Object.assign({ fontFamily: T.serif }, extra || {});

  window.EcUI = { T, btn, eyebrow, h1, h2, h3, para, price, quote, badge, serif };
})();