/* ============================================================
   THE 40+ STYLES — full museum, grouped into 6 families.
   Each style is a token object read by GenericStyleCard, so the
   gallery is a live museum: every card renders in its own look.
   Featured styles (4) carry featured:true + an id that maps to a
   full collection in config.jsx. Adding a style = append a token
   object here (and, if it should be explorable, author its CSS
   universe + blocks). Nothing else changes.

   token: { bg, surface, text, sub, accent, accent2, radius,
            border, shadow, font, sig, onAccent?, btn? }
   ============================================================ */
(function(){
  const F = (name, blurb, items) => ({ name, blurb, items });

  /* shorthand token builder with sensible defaults */
  const t = (o) => Object.assign({
    sub:'rgba(0,0,0,.5)', accent2:o.accent, radius:'16px',
    border:'1px solid rgba(0,0,0,.08)', shadow:'0 8px 24px rgba(0,0,0,.12)',
    font:"'Manrope',sans-serif", sig:'none', onAccent:'#fff',
  }, o);

  const FAMILIES = [
    F('Surfaces & matter','How light, depth and material behave on a surface.',[
      { id:'glass', name:'Glassmorphism', featured:true, count:52,
        vibe:'Frosted translucent panels on vivid light.' },
      { name:'Neumorphism', count:34, vibe:'Soft monochrome, dual extruded shadows.',
        t:t({ bg:'#e6e9ef', surface:'#e6e9ef', text:'#3a4252', sub:'#8a93a6', accent:'#5b6cff', radius:'22px',
          border:'none', shadow:'10px 10px 22px #c5c9d2, -10px -10px 22px #ffffff', font:"'Sora',sans-serif", sig:'emboss' }) },
      { name:'Claymorphism', count:28, vibe:'Puffy 3D clay volumes, candy pastels.',
        t:t({ bg:'#ffe9f2', surface:'#fff', text:'#5a3a52', sub:'#b487a3', accent:'#ff7eb6', radius:'30px',
          border:'none', shadow:'0 16px 30px rgba(255,126,182,.4), inset 0 -6px 12px rgba(0,0,0,.06), inset 0 6px 12px #fff', font:"'Sora',sans-serif", sig:'none' }) },
      { name:'Skeuomorphism', count:21, vibe:'Realistic texture, bevels, stitched edges.',
        t:t({ bg:'linear-gradient(#d9c7a8,#c7b08a)', surface:'linear-gradient(#fefdf8,#e7ddc6)', text:'#4a3c24', sub:'#8a7a5a', accent:'#b5732e', radius:'12px',
          border:'1px solid #a98f63', shadow:'0 4px 0 #9c8253, 0 10px 18px rgba(0,0,0,.3), inset 0 1px 0 #fff', font:"Georgia, serif", sig:'noise' }) },
      { name:'Flat Design', count:30, vibe:'Pure flat fills, zero shadow, bright.',
        t:t({ bg:'#1abc9c', surface:'#fff', text:'#2c3e50', sub:'#7f8c9b', accent:'#e74c3c', accent2:'#3498db', radius:'6px',
          border:'none', shadow:'none', font:"'Space Grotesk',sans-serif", sig:'none' }) },
      { name:'Material Design', count:36, vibe:'Elevation layers, ripple, paper cards.',
        t:t({ bg:'#eceff1', surface:'#fff', text:'#212121', sub:'#757575', accent:'#6200ee', accent2:'#03dac6', radius:'8px',
          border:'none', shadow:'0 1px 3px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.14)', font:"system-ui,'Space Grotesk',sans-serif", sig:'none' }) },
      { name:'Aurora / Mesh', count:25, vibe:'Soft flowing multicolor mesh, glassy text.',
        t:t({ bg:'linear-gradient(135deg,#1b1140,#3a1d6e)', surface:'rgba(255,255,255,.1)', text:'#fff', sub:'rgba(255,255,255,.6)', accent:'#a78bfa', accent2:'#2dd4ff', radius:'22px',
          border:'1px solid rgba(255,255,255,.2)', shadow:'0 12px 40px rgba(80,40,160,.4)', font:"'Manrope',sans-serif", sig:'mesh' }) },
    ]),

    F('Bold & expressive','Loud, opinionated, editorial — design with a raised voice.',[
      { id:'maximal', name:'Maximalism', featured:true, count:38,
        vibe:'Clashing color, huge type, composed chaos.' },
      { name:'Minimalism', count:42, vibe:'White space, restraint, a single quiet accent.',
        t:t({ bg:'#fafafa', surface:'#fff', text:'#111', sub:'#999', accent:'#111', radius:'2px',
          border:'1px solid #ececec', shadow:'none', font:"'Manrope',sans-serif", sig:'none', onAccent:'#fff' }) },
      { name:'Neobrutalism', count:33, vibe:'Thick black borders, hard offset shadows.',
        t:t({ bg:'#ffde59', surface:'#fff', text:'#111', sub:'#444', accent:'#ff5c8a', accent2:'#4d61ff', radius:'4px',
          border:'3px solid #111', shadow:'7px 7px 0 #111', font:"'Archivo Black',sans-serif", sig:'none', onAccent:'#fff',
          btn:{ background:'#4d61ff', color:'#fff', border:'3px solid #111', borderRadius:'4px', boxShadow:'4px 4px 0 #111', fontWeight:800 } }) },
      { name:'Brutalism', count:19, vibe:'Raw HTML energy, system type, anti-polish.',
        t:t({ bg:'#dcdcdc', surface:'#fff', text:'#000', sub:'#333', accent:'#0000ff', radius:'0px',
          border:'2px solid #000', shadow:'none', font:"'Times New Roman', serif", sig:'none', onAccent:'#fff',
          btn:{ background:'#fff', color:'#00f', border:'2px solid #000', borderRadius:'0', fontWeight:700, textDecoration:'underline' } }) },
      { name:'Swiss / International', count:31, vibe:'Strict grid, Helvetica, red-black-white.',
        t:t({ bg:'#f2f2f2', surface:'#fff', text:'#111', sub:'#888', accent:'#e2231a', radius:'0px',
          border:'1px solid #111', shadow:'none', font:"Helvetica, Arial, sans-serif", sig:'none', onAccent:'#fff' }) },
      { name:'Editorial / Magazine', count:27, vibe:'Press layout, drop caps, big headlines.',
        t:t({ bg:'#f7f3ea', surface:'#fffdf8', text:'#1a1410', sub:'#8a7d6a', accent:'#c0392b', radius:'2px',
          border:'1px solid #e3d9c6', shadow:'0 6px 20px rgba(0,0,0,.08)', font:"'Playfair Display', serif", sig:'none', onAccent:'#fff' }) },
      { name:'Bauhaus', count:23, vibe:'Primary geometry: circle, triangle, square.',
        t:t({ bg:'#f0e9dd', surface:'#fff', text:'#111', sub:'#777', accent:'#e63946', accent2:'#1d3557', radius:'2px',
          border:'2px solid #111', shadow:'none', font:"'Archivo Black',sans-serif", sig:'none', onAccent:'#fff' }) },
      { name:'Memphis', count:24, vibe:'80s squiggles, confetti shapes, bold patterns.',
        t:t({ bg:'#ffe14d', surface:'#fff', text:'#1a1a2e', sub:'#6a6a8a', accent:'#ff4d6d', accent2:'#2ec4b6', radius:'10px',
          border:'3px solid #1a1a2e', shadow:'5px 5px 0 #2ec4b6', font:"'Space Grotesk',sans-serif", sig:'confetti', onAccent:'#fff' }) },
    ]),

    F('Future & tech','Synthwave, sci-fi and screens that feel like the next decade.',[
      { id:'retro', name:'Retro Futurism', featured:true, count:41,
        vibe:'Synthwave neon on near-black, grid horizon.' },
      { name:'Cyberpunk / HUD', count:29, vibe:'Glitch overlays, angular frames, neon.',
        t:t({ bg:'#0a0010', surface:'rgba(20,0,30,.7)', text:'#f5d4ff', sub:'#a06ab0', accent:'#ff003c', accent2:'#00f0ff', radius:'2px',
          border:'1px solid #ff003c', shadow:'0 0 18px rgba(255,0,60,.5)', font:"'Space Mono',monospace", sig:'scanlines', onAccent:'#000' }) },
      { name:'Holographic / Iridescent', count:22, vibe:'Liquid-metal sheen, rainbow chrome.',
        t:t({ bg:'#0d0d18', surface:'rgba(255,255,255,.08)', text:'#fff', sub:'rgba(255,255,255,.6)', accent:'#b388ff', accent2:'#7afcff', radius:'18px',
          border:'1px solid rgba(255,255,255,.3)', shadow:'0 12px 40px rgba(120,200,255,.3)', font:"'Sora',sans-serif", sig:'iridescent', onAccent:'#000' }) },
      { name:'Y2K', count:26, vibe:'Chrome bubbles, glossy plastic, lens flare.',
        t:t({ bg:'linear-gradient(135deg,#c9e7ff,#e7d2ff)', surface:'rgba(255,255,255,.7)', text:'#2a2a5a', sub:'#7a7ab0', accent:'#ff5edb', accent2:'#5ed0ff', radius:'999px',
          border:'2px solid #fff', shadow:'0 8px 20px rgba(150,120,255,.4), inset 0 2px 6px #fff', font:"'Sora',sans-serif", sig:'glow', onAccent:'#fff' }) },
      { name:'Dark Luxe', count:35, vibe:'Deep black, gold accents, premium serif.',
        t:t({ bg:'#0c0c0e', surface:'#16161a', text:'#f5efe0', sub:'#9a9384', accent:'#c8a24a', radius:'4px',
          border:'1px solid #2a2620', shadow:'0 14px 40px rgba(0,0,0,.6)', font:"'Playfair Display', serif", sig:'none', onAccent:'#0c0c0e' }) },
      { name:'Terminal / Hacker', count:18, vibe:'Monospace, green-on-black, CLI prompts.',
        t:t({ bg:'#020a02', surface:'#020a02', text:'#46ff7a', sub:'#1f8a3f', accent:'#46ff7a', radius:'0px',
          border:'1px solid #1f8a3f', shadow:'0 0 16px rgba(70,255,122,.25)', font:"'Space Mono',monospace", sig:'scanlines', onAccent:'#020a02',
          btn:{ background:'transparent', color:'#46ff7a', border:'1px solid #46ff7a', borderRadius:'0', fontWeight:700 } }) },
    ]),

    F('Organic & motion','Shapes that breathe, surfaces that spring and morph.',[
      { id:'motion', name:'Motion Morphism', featured:true, count:44,
        vibe:'Morphing blobs, springy press, alive.' },
      { name:'Organic / Blob / Fluid', count:27, vibe:'Soft natural curves, earthy-fresh.',
        t:t({ bg:'#eef6ec', surface:'#fff', text:'#2d4a32', sub:'#7a9a7e', accent:'#5fb86a', radius:'40% 60% 55% 45% / 55% 45% 60% 40%',
          border:'none', shadow:'0 14px 34px rgba(95,184,106,.3)', font:"'Sora',sans-serif", sig:'none', onAccent:'#fff' }) },
      { name:'Kinetic Typography', count:21, vibe:'Type is the UI — oversized, marquee.',
        t:t({ bg:'#111', surface:'#111', text:'#fff', sub:'#888', accent:'#ffe600', radius:'0px',
          border:'none', shadow:'none', font:"'Bebas Neue', sans-serif", sig:'none', onAccent:'#111' }) },
      { name:'3D / Spatial', count:24, vibe:'Depth, perspective, layered elevation.',
        t:t({ bg:'linear-gradient(160deg,#dfe6f0,#c3cfe2)', surface:'#fff', text:'#2a3550', sub:'#7d8aa6', accent:'#6c5ce7', radius:'20px',
          border:'1px solid rgba(255,255,255,.8)', shadow:'0 30px 50px -20px rgba(80,90,160,.5), 0 2px 0 #fff', font:"'Sora',sans-serif", sig:'none', onAccent:'#fff' }) },
      { name:'Scrollytelling / Parallax', count:19, vibe:'Narrative layers reacting to scroll.',
        t:t({ bg:'linear-gradient(180deg,#1a2a6c,#b21f1f)', surface:'rgba(0,0,0,.35)', text:'#fff', sub:'rgba(255,255,255,.65)', accent:'#fdbb2d', radius:'14px',
          border:'1px solid rgba(255,255,255,.18)', shadow:'0 16px 40px rgba(0,0,0,.4)', font:"'Playfair Display', serif", sig:'none', onAccent:'#1a2a6c' }) },
    ]),

    F('Retro & nostalgia','Pixels, grain and paper — design that remembers.',[
      { name:'Retro / 8-bit / Pixel', count:20, vibe:'Pixel art, arcade, limited palette.',
        t:t({ bg:'#1a1c2c', surface:'#29366f', text:'#f4f4f4', sub:'#a0a8d0', accent:'#ef7d57', accent2:'#41a6f6', radius:'0px',
          border:'3px solid #f4f4f4', shadow:'4px 4px 0 #000', font:"'Press Start 2P', monospace", sig:'pixel', onAccent:'#1a1c2c' }) },
      { name:'Vaporwave', count:23, vibe:'Pastel neon, grids, 90s-net nostalgia.',
        t:t({ bg:'linear-gradient(180deg,#2b1055,#7597de)', surface:'rgba(255,255,255,.12)', text:'#ffe6ff', sub:'#c9a8ff', accent:'#ff71ce', accent2:'#01cdfe', radius:'4px',
          border:'1px solid #ff71ce', shadow:'0 0 22px rgba(255,113,206,.4)', font:"'VT323', monospace", sig:'grid-persp', onAccent:'#2b1055' }) },
      { name:'Vintage / Analog', count:22, vibe:'Faded tones, grain, 70s palette, serif.',
        t:t({ bg:'#e9ddc7', surface:'#f6efe0', text:'#4a3b28', sub:'#9a8868', accent:'#c1632d', accent2:'#5a7a4a', radius:'6px',
          border:'1px solid #cdbb97', shadow:'0 8px 20px rgba(120,90,50,.2)', font:"'Playfair Display', serif", sig:'noise', onAccent:'#fff' }) },
      { name:'Newspaper / Print', count:17, vibe:'Black & white, columns, serif, rules.',
        t:t({ bg:'#f4f1e8', surface:'#fbfaf5', text:'#161616', sub:'#666', accent:'#161616', radius:'0px',
          border:'1px solid #161616', shadow:'none', font:"Georgia, serif", sig:'halftone', onAccent:'#fff' }) },
      { name:'Hand-drawn / Sketch', count:25, vibe:'Hand strokes, doodles, wobbly borders.',
        t:t({ bg:'#fffdf5', surface:'#fff', text:'#2b2b2b', sub:'#8a8a7a', accent:'#3a6ea5', radius:'14px',
          border:'2px solid #2b2b2b', shadow:'3px 4px 0 rgba(43,43,43,.18)', font:"'Caveat', cursive", sig:'none', onAccent:'#fff' }) },
      { name:'Collage / Cut-out', count:18, vibe:'Paper cut-out, tape, torn edges, mixed.',
        t:t({ bg:'#e8e2d4', surface:'#fff', text:'#222', sub:'#777', accent:'#ff5252', accent2:'#3d5afe', radius:'2px',
          border:'1px solid #ccc', shadow:'5px 6px 14px rgba(0,0,0,.2), 0 0 0 8px #fff', font:"'Space Grotesk',sans-serif", sig:'none', onAccent:'#fff' }) },
    ]),

    F('Color & mood','When the palette is the whole personality.',[
      { name:'Duotone', count:21, vibe:'Two strong colors, halftone blend.',
        t:t({ bg:'#1a0b3d', surface:'#2a1166', text:'#ff5ea8', sub:'#a878d6', accent:'#ff5ea8', accent2:'#5ea8ff', radius:'10px',
          border:'1px solid #ff5ea8', shadow:'0 10px 30px rgba(255,94,168,.3)', font:"'Space Grotesk',sans-serif", sig:'halftone', onAccent:'#1a0b3d' }) },
      { name:'Monochrome', count:28, vibe:'Single hue, pure black & white discipline.',
        t:t({ bg:'#111', surface:'#1c1c1c', text:'#fff', sub:'#888', accent:'#fff', radius:'4px',
          border:'1px solid #333', shadow:'none', font:"Helvetica, Arial, sans-serif", sig:'none', onAccent:'#111' }) },
      { name:'Pastel / Soft', count:32, vibe:'Gentle calm palette, rounded, kind.',
        t:t({ bg:'#fdeef4', surface:'#fff', text:'#6a5a72', sub:'#b7a8c0', accent:'#c8a2e0', accent2:'#a2d2e0', radius:'24px',
          border:'1px solid #f3e3ee', shadow:'0 12px 30px rgba(200,162,224,.25)', font:"'Sora',sans-serif", sig:'none', onAccent:'#fff' }) },
      { name:'Luxury / Elegant', count:30, vibe:'Chic serif, gold, refined negative space.',
        t:t({ bg:'#faf7f0', surface:'#fff', text:'#1a1a1a', sub:'#9a8f7a', accent:'#a8893f', radius:'2px',
          border:'1px solid #e6dcc6', shadow:'0 16px 40px rgba(0,0,0,.06)', font:"'Playfair Display', serif", sig:'none', onAccent:'#fff' }) },
      { name:'Corporate / Clean SaaS', count:40, vibe:'Pro blue, crisp, trustworthy, legible.',
        t:t({ bg:'#f5f8ff', surface:'#fff', text:'#0f1b3d', sub:'#5b6b8c', accent:'#2563eb', accent2:'#06b6d4', radius:'12px',
          border:'1px solid #e3eaf6', shadow:'0 10px 30px rgba(37,99,235,.12)', font:"'Manrope',sans-serif", sig:'none', onAccent:'#fff' }) },
      { name:'Playful / Cartoon', count:29, vibe:'Mascots, bouncy, bright, rounded.',
        t:t({ bg:'#fff0c2', surface:'#fff', text:'#3a2a5a', sub:'#9a86b0', accent:'#ff6b6b', accent2:'#4ecdc4', radius:'24px',
          border:'3px solid #3a2a5a', shadow:'0 8px 0 #3a2a5a', font:"'Sora',sans-serif", sig:'confetti', onAccent:'#fff' }) },
      { name:'Earthy / Eco', count:26, vibe:'Natural greens & browns, sustainable.',
        t:t({ bg:'#eef0e2', surface:'#fbfcf4', text:'#33401f', sub:'#7e8a5e', accent:'#6b8e23', accent2:'#a0522d', radius:'14px',
          border:'1px solid #d9ddc4', shadow:'0 10px 26px rgba(80,100,40,.18)', font:"'Sora',sans-serif", sig:'none', onAccent:'#fff' }) },
      { name:'Art Deco', count:24, vibe:'Gilded geometry, 1920s symmetry, ornament.',
        t:t({ bg:'#0e1a1a', surface:'#11201f', text:'#e8d9a8', sub:'#9a8f6a', accent:'#cba85c', radius:'2px',
          border:'1px solid #cba85c', shadow:'0 14px 36px rgba(0,0,0,.5)', font:"'Playfair Display', serif", sig:'rays', onAccent:'#0e1a1a' }) },
      { name:'Grunge / Distressed', count:19, vibe:'Gritty texture, punk, distressed type.',
        t:t({ bg:'#1c1a17', surface:'#262320', text:'#e6e1d6', sub:'#8a8270', accent:'#d6402f', radius:'2px',
          border:'1px solid #3a352e', shadow:'none', font:"'Archivo Black', sans-serif", sig:'noise', onAccent:'#1c1a17' }) },
    ]),
  ];

  const TOTAL = FAMILIES.reduce((n,f)=>n+f.items.length,0);

  window.FAMILIES = FAMILIES;
  window.TOTAL_STYLES = TOTAL;
})();