/* ============================================================
   STYLES-ALL — activate every style (no more "coming soon").
   Builds a full token universe (CSS + s.cls config) for each
   non-featured style from its token object in styles40.jsx, so
   ANY style can drive a live collection. The 4 featured styles
   keep their hand-crafted CSS in empire.css / config.jsx.
   ============================================================ */
(function(){
  if(!window.FAMILIES || !window.STYLES) return;
  const slug = n => n.toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'');
  const a2 = t => t.accent2 || t.accent;
  const css = [];

  /* light signature overlays for extra authenticity */
  function sig(id, t){
    const s = t.sig;
    if(s==='scanlines') return `.${id}-canvas::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}`;
    if(s==='mesh') return `.${id}-canvas::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(40% 50% at 20% 20%,${t.accent}55,transparent 60%),radial-gradient(40% 50% at 85% 80%,${a2(t)}44,transparent 60%)}`;
    if(s==='grid-persp') return `.${id}-canvas::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 95%,${t.accent}33 95%),linear-gradient(90deg,transparent 95%,${t.accent}22 95%);background-size:28px 28px;opacity:.5}`;
    if(s==='confetti') return `.${id}-canvas::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 18%,${a2(t)} 0 7px,transparent 8px),radial-gradient(circle at 14% 82%,${t.accent} 0 9px,transparent 10px);opacity:.7}`;
    if(s==='glow'||s==='iridescent') return `.${id}-canvas::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 60% at 70% 25%,${t.accent}33,transparent 60%)}`;
    if(s==='rays') return `.${id}-canvas::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 0,${t.accent}14 0 6deg,transparent 6deg 12deg);opacity:.5}`;
    if(s==='noise'||s==='halftone'||s==='emboss'||s==='pixel') return `.${id}-canvas::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;background:radial-gradient(${t.text} 1px,transparent 1px);background-size:5px 5px}`;
    return '';
  }

  function build(it){
    const t = it.t; if(!t) return;
    const id = it.id = slug(it.name);
    if(window.STYLES[id]) return; // don't clobber featured
    const onA = t.onAccent || '#fff';
    /* radius semantics differ: a "blob" radius is meant for big surfaces (breaks small
       controls), a 999px pill is meant for controls (turns cards into ovals). Split them. */
    const blob = /\//.test(t.radius);
    const pill = String(t.radius).trim() === '999px';
    const rSurface = blob ? '28px' : (pill ? '24px' : t.radius); // cards: blob->soft round (no ellipses), cap pill
    const rCtrl    = blob ? '999px' : t.radius;                    // buttons/inputs: blob -> soft pill
    const btnP = t.btn
      ? Object.entries(t.btn).map(([k,v])=>`${k.replace(/[A-Z]/g,m=>'-'+m.toLowerCase())}:${v}`).join(';')
      : `background:${t.accent};color:${onA};border:none;border-radius:${rCtrl};font-weight:700`;
    css.push(
`.${id}-canvas{background:${t.bg};color:${t.text};font-family:${t.font};position:relative;overflow:hidden}`,
`.${id}-surface{background:${t.surface};color:${t.text};border:${t.border};box-shadow:${t.shadow};border-radius:${rSurface}}`,
`.${id}-surface2{background:${t.surface};border:${t.border};border-radius:${rSurface};opacity:.96}`,
`.${id}-btn{background:transparent;border:${t.border};color:${t.text};border-radius:${rCtrl};font-weight:600;transition:filter .18s ease, transform .18s cubic-bezier(.3,.7,.4,1);cursor:pointer}`,
`.${id}-btn:hover{filter:brightness(1.08)}`,
`.${id}-btn:active{transform:scale(.985);transition-duration:.08s}`,
`.${id}-btn-primary{${btnP};cursor:pointer;transition:filter .18s ease, transform .18s cubic-bezier(.3,.7,.4,1), box-shadow .18s ease}`,
`.${id}-btn-primary:hover{filter:brightness(1.06)}`,
`.${id}-btn-primary:active{transform:scale(.985);transition-duration:.08s}`,
`.${id}-input{background:${t.surface};border:${t.border};color:${t.text};border-radius:${rCtrl};transition:border-color .18s ease, box-shadow .18s ease}`,
`.${id}-input:focus{outline:none;border-color:${t.accent};box-shadow:0 0 0 3px ${t.accent}26}`,
`.${id}-chip{background:${t.accent}22;color:${t.accent};border:1px solid ${t.accent}55;border-radius:999px}`,
`.${id}-text{color:${t.text}}`,
`.${id}-sub{color:${t.sub}}`,
`.${id}-muted{color:${t.sub};opacity:.72}`,
      sig(id,t)
    );
    window.STYLES[id] = {
      id, name:it.name, tagline:it.vibe, vibe:it.vibe, count:it.count||40,
      canvas:id+'-canvas',
      swatch:[t.accent, a2(t), t.text, t.bg.includes('#')?t.bg:'#ffffff'],
      chart:[t.accent, a2(t)],
      cls:{
        surface:id+'-surface', surface2:id+'-surface2',
        btn:id+'-btn', btnPrimary:id+'-btn-primary', input:id+'-input', chip:id+'-chip',
        text:id+'-text', sub:id+'-sub', muted:id+'-muted',
        accent:t.accent,
      },
    };
  }

  window.FAMILIES.forEach(fam => fam.items.forEach(build));

  const el = document.createElement('style');
  el.id = 'empire-styles-all';
  el.textContent = css.filter(Boolean).join('\n');
  document.head.appendChild(el);

  /* every style is now live & openable */
  window.STYLE_ALL = Object.keys(window.STYLES);
})();