// CSS reset emitter — modern, brand-aware base styles.
//
// Most CSS resets (normalize, sanitize, Josh Comeau) are generic. This
// one is wired to the brand we just extracted: body uses the brand
// background / foreground, headings use the brand display family, links
// use the brand primary, selection uses the brand accent.
//
// Drop at the top of your stylesheet, then import Tailwind / your CSS.

const RESET = `/* ──────────────────────────────────────────────────────────────
   Brand-aware reset — generated by designlang
   {site}
   {generated}
   ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure,
form, fieldset, table, hr {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust:    100%;
  text-size-adjust:         100%;
  -webkit-tap-highlight-color: transparent;
  font-family: {fontSans}, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: {fontBase}px;
  line-height: 1.5;
}

body {
  background-color: {bg};
  color: {fg};
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: {fontDisplay}, system-ui, -apple-system, sans-serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

a {
  color: {primary};
  text-decoration: none;
  background-color: transparent;
}
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid {accent}; outline-offset: 2px; border-radius: 4px; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, textarea, select, button {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: 0; padding: 0; }

code, pre, kbd, samp {
  font-family: {fontMono}, ui-monospace, 'SF Mono', Menlo, monospace;
}

hr {
  border: 0;
  border-top: 1px solid {hairline};
}

::selection {
  background: {accent};
  color: {bg};
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
`;

function pickFamily(design, kind) {
  const fams = design?.typography?.families || [];
  if (kind === 'mono') {
    const m = fams.find((f) => /mono|code|courier/i.test(f.name || f));
    return m ? `"${m.name || m}"` : 'ui-monospace';
  }
  if (kind === 'display') {
    const d = fams.find((f) => /display|serif|headline/i.test(f.name || f));
    return d ? `"${d.name || d}"` : `"${fams[0]?.name || fams[0] || 'system'}"`;
  }
  return fams[0] ? `"${fams[0].name || fams[0]}"` : 'system-ui';
}

function pickHex(design, role, fallback) {
  return design?.colors?.[role]?.hex || fallback;
}

export function formatCssReset(design) {
  const subs = {
    site: design?.meta?.title || design?.meta?.url || '—',
    generated: new Date().toISOString(),
    fontSans:    pickFamily(design, 'sans'),
    fontMono:    pickFamily(design, 'mono'),
    fontDisplay: pickFamily(design, 'display'),
    fontBase:    design?.typography?.base || 16,
    bg:          pickHex(design, 'background', '#ffffff') || (design?.colors?.backgrounds?.[0] || '#ffffff'),
    fg:          pickHex(design, 'foreground', '#000000') || (design?.colors?.text?.[0] || '#000000'),
    primary:     pickHex(design, 'primary',   '#0070f3'),
    accent:      pickHex(design, 'accent',    pickHex(design, 'primary', '#0070f3')),
    hairline:    pickHex(design, 'secondary', '#e5e5e5'),
  };
  return RESET.replace(/\{(\w+)\}/g, (_, k) => subs[k] ?? `var(--${k})`);
}
