// While2 — shared styles + ASCII dolphin + atoms
// Wireframe vibe: handwritten-but-readable, mono base, single cyan accent.
// Everything here is global on window so other JSX files can use it.

const W2 = {
  // black/cyan base — Watch Dogs nod, but quieter
  bg: '#0a0d0e',
  bgSoft: '#0f1314',
  panel: '#13181a',
  ink: '#dfe6e8',
  inkDim: 'rgba(223,230,232,0.55)',
  inkFaint: 'rgba(223,230,232,0.28)',
  rule: 'rgba(223,230,232,0.16)',
  ruleSoft: 'rgba(223,230,232,0.08)',
  cyan: '#5cd7ff',
  cyanDim: 'rgba(92,215,255,0.55)',
  cyanGlow: 'rgba(92,215,255,0.18)',
  warn: '#ffb84d',
  // fonts — DotGothic16 everywhere (pixel/bitmap, JP-native, monospace-friendly).
  mono: '"DotGothic16", monospace',
  code: '"DotGothic16", monospace',
  hand: '"DotGothic16", monospace',
  sketch: '"DotGothic16", monospace',
};

// One-time styles for sketch + scanlines + blink
if (typeof document !== 'undefined' && !document.getElementById('w2-styles')) {
  // load Google Fonts
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=DotGothic16&display=swap';
  document.head.appendChild(link);

  const s = document.createElement('style');
  s.id = 'w2-styles';
  s.textContent = `
    .w2-screen{font-family:${W2.mono};color:${W2.ink};background:${W2.bg};
      -webkit-font-smoothing:antialiased;letter-spacing:0;}
    .w2-code{font-family:${W2.code};letter-spacing:0;}
    .w2-screen *{box-sizing:border-box;}
    .w2-screen ::selection{background:${W2.cyan};color:#000;}
    .w2-mono{font-family:${W2.mono};}
    .w2-hand{font-family:${W2.hand};}
    .w2-sketch{font-family:${W2.sketch};}
    .w2-cyan{color:${W2.cyan};}
    .w2-dim{color:${W2.inkDim};}
    .w2-faint{color:${W2.inkFaint};}
    .w2-up{text-transform:uppercase;letter-spacing:0.12em;}
    .w2-blink{animation:w2blink 1.05s steps(2) infinite;}
    @keyframes w2blink{50%{opacity:0;}}
    @keyframes w2-ai-scroll{
      from{transform:translateX(0);}
      to{transform:translateX(-50%);}
    }
    .w2-ai-marquee:hover .w2-ai-track{animation-play-state:paused;}
    .w2-foot-link:hover{color:#5cd7ff !important;border-color:#5cd7ff !important;}
    .w2-avail-link{color:#fff;text-decoration:none;text-transform:uppercase;
      border-bottom:1px solid rgba(255,255,255,0.25);
      padding-bottom:1px;transition:color 0.15s,border-color 0.15s;}
    .w2-avail-link:hover{color:#5cd7ff;border-bottom-color:#5cd7ff;}
    .w2-scan{position:absolute;inset:0;pointer-events:none;
      background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(255,255,255,0.018) 2px,rgba(255,255,255,0.018) 3px);
      mix-blend-mode:screen;}
    .w2-noise{position:absolute;inset:0;pointer-events:none;opacity:0.05;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");}
    .w2-grad-top{background:linear-gradient(180deg,#0a0d0e 0%,#0a0d0e 60%,#08383f 100%);}
    .w2-grad-bot{background:linear-gradient(180deg,#08383f 0%,#0a0d0e 40%,#0a0d0e 100%);}
    .w2-rule{border-top:1px dashed ${W2.rule};}
    .w2-row{display:flex;align-items:center;gap:8px;}
    .w2-tag{display:inline-block;padding:2px 6px;border:1px solid ${W2.rule};
      font-size:9px;letter-spacing:0.14em;text-transform:uppercase;}
    .w2-tag-cy{border-color:${W2.cyanDim};color:${W2.cyan};}
    .w2-checkbox{width:14px;height:14px;border:1px solid ${W2.inkDim};
      display:inline-flex;align-items:center;justify-content:center;
      flex:none;}
    .w2-checkbox.on{border-color:${W2.cyan};background:${W2.cyanGlow};color:${W2.cyan};}
    .w2-btn{border:1px solid ${W2.cyanDim};color:${W2.cyan};
      padding:6px 10px;font-family:${W2.mono};font-size:10px;
      letter-spacing:0.16em;text-transform:uppercase;background:transparent;
      cursor:pointer;}
    .w2-btn-ghost{border-color:${W2.rule};color:${W2.inkDim};}
    .w2-asciibox{font-family:${W2.mono};white-space:pre;line-height:1.05;
      letter-spacing:0;font-size:8px;color:${W2.cyan};}
    .w2-pencil{filter:url(#w2rough);}
    .w2-pencil-rect{fill:none;stroke:${W2.ink};stroke-width:1;}
    .sketch-rect{
      border:1px solid ${W2.rule};
      border-radius:1px;
      position:relative;
    }
    .sketch-rect::after{
      content:"";position:absolute;inset:-2px;border:1px solid ${W2.ruleSoft};
      pointer-events:none;border-radius:2px;
    }
    .w2-shadow{box-shadow:0 0 0 1px ${W2.rule}, 0 12px 30px rgba(0,0,0,0.4);}
    .w2-bracket{font-family:${W2.mono};color:${W2.cyanDim};}
    .w2-listrow{display:flex;align-items:center;gap:10px;
      padding:10px 14px;border-bottom:1px dashed ${W2.ruleSoft};}
    .w2-pill{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;
      border:1px solid ${W2.rule};font-size:9px;letter-spacing:0.1em;
      text-transform:uppercase;color:${W2.inkDim};}
    .w2-pill-cy{border-color:${W2.cyanDim};color:${W2.cyan};}
    .w2-input{background:transparent;border:none;border-bottom:1px dashed ${W2.rule};
      color:${W2.ink};font-family:${W2.mono};font-size:11px;padding:4px 0;width:100%;
      outline:none;}
    .w2-input:focus{border-bottom-color:${W2.cyan};}
    .w2-handnote{font-family:${W2.hand};color:${W2.cyanDim};font-size:14px;
      transform:rotate(-2deg);display:inline-block;line-height:1;}
    .w2-arrow{font-family:${W2.hand};color:${W2.cyan};font-size:16px;}
    /* dotted/dashed wireframe placeholder */
    .w2-ph{
      border:1px dashed ${W2.rule};display:flex;align-items:center;
      justify-content:center;color:${W2.inkFaint};font-size:9px;
      letter-spacing:0.18em;text-transform:uppercase;
    }
    .w2-progress{height:2px;background:${W2.ruleSoft};position:relative;overflow:hidden;}
    .w2-progress > i{position:absolute;left:0;top:0;bottom:0;background:${W2.cyan};display:block;}
    .w2-spark{font-family:${W2.mono};letter-spacing:0;color:${W2.cyan};}
  `;
  document.head.appendChild(s);
}

window.W2 = W2;