/* Juli-Fone, as a Nuxt 4 app.
   ssr:false on purpose — the machine is a client-side object: it opens the mic,
   holds object URLs, measures its own boxes with ResizeObserver and seeds its
   waveform with Math.random(). None of that has a server half, and the
   prototype has no storage (see CLAUDE.md), so there is nothing to render ahead
   of time. */
export default defineNuxtConfig({
  ssr: false,
  compatibilityDate: '2025-07-15',
  /* No devtools button: the machine is a fixed 402×874 frame and the launcher
     floats over its bottom-right corner mid-demo. */
  devtools: { enabled: false },

  /* Global, unscoped, and in this order — the cassette first so the machine's
     own sheet can still override it. Nothing here is scoped CSS: every class
     name in these two files is the one the markup already used, and scoping them
     would rewrite selectors the design depends on.

     tape-parts.css is Kat's, and it is still the only place a cassette is drawn.
     Everything the app fetches at runtime — the four label faces, the twelve
     stickers, the intro's photograph, the audio fixtures — is under public/,
     which is the one place a Nuxt app serves static files from. That's why the
     paths in tape-parts.css and app/utils are root-absolute: a build-time import
     would hash the filename, and these are named as data. */
  css: [
    '~/assets/css/tape-parts.css',
    '~/assets/css/main.css',
  ],

  app: {
    head: {
      title: 'Juli-Fone 850',
      htmlAttrs: { lang: 'en' },
      meta: [
        { charset: 'UTF-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1.0, viewport-fit=cover' },
      ],
      link: [
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Figtree:wght@400..700&family=Newsreader:opsz,wght@6..72,500&family=VT323&family=Fontdiner+Swanky&display=swap' },
      ],
    },
  },
})