// Shared global styles for dub2.ai site
// Injects CSS that primitives (and media queries) rely on

const GlobalStyles = () => (
  <style dangerouslySetInnerHTML={{ __html: `
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; background: var(--bg-canvas); color: var(--fg-1); }
    body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }

    a { color: inherit; }
    button { font-family: var(--font-body); }

    /* Button hover/press */
    .d2-btn { position: relative; }
    .d2-btn:hover { filter: brightness(1.02); }
    .d2-btn-primary:hover { background: var(--red-700) !important; }
    .d2-btn-secondary:hover { border-color: var(--brand-ember) !important; color: var(--brand-ember) !important; }
    .d2-btn-ghost:hover { color: var(--brand-ember) !important; }
    .d2-btn-onDark:hover { filter: brightness(0.96); }
    .d2-btn-onDarkGhost:hover { border-color: rgba(255,255,255,0.45) !important; background: rgba(255,255,255,0.06) !important; }
    .d2-btn:active { transform: scale(0.98); }

    input::placeholder, textarea::placeholder { color: var(--fg-4); }

    /* Theme backgrounds (controlled by data-theme on root) */
    [data-theme="cream"]  { --bg-canvas: #FFF7F3; }
    [data-theme="offwhite"] { --bg-canvas: #FAF5F2; }
    [data-theme="dark"] {
      --bg-canvas: #17120F;
      --fg-1: #FAF5F2;
      --fg-2: #D4C6BD;
      --fg-3: #A89A91;
      --border-1: rgba(255,255,255,0.08);
      --border-2: rgba(255,255,255,0.14);
      background: var(--bg-canvas);
    }
    [data-theme="dark"] body { background: var(--bg-canvas); }

    /* Responsive */
    @media (max-width: 900px) {
      .d2-nav-desktop { display: none !important; }
      .d2-nav-mobile-toggle { display: inline-flex !important; }
      .d2-nav-mobile-drawer { display: block !important; }

      .d2-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
      .d2-hero-grid > :last-child { justify-self: center !important; }

      .d2-products-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
      .d2-products-divider { display: none !important; }

      .d2-bento { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; }
      .d2-bento-cell { grid-column: span 1 !important; grid-row: auto !important; }

      .d2-mission-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

      .d2-founder-card { grid-template-columns: 1fr !important; gap: 32px !important; }

      .d2-contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
      .d2-form-row { grid-template-columns: 1fr !important; }

      .d2-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
      .d2-footer-wordmark { font-size: 80px !important; }

      .d2-ceohero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
      .d2-ceohero-portrait { width: 100% !important; max-width: 340px; justify-self: start !important; }

      .d2-glance-row { grid-template-columns: 1fr !important; gap: 4px !important; }
    }
    @media (max-width: 560px) {
      .d2-footer-grid { grid-template-columns: 1fr !important; }
    }
  `}} />
);

window.GlobalStyles = GlobalStyles;