/* PromptMeGood — G theme overlay (Brand Teal / Warm Dark Hybrid)
   Token + skin override. Loaded after inline <style>, wins cascade.
   Palette pulled from the PMG logo: deep teal bg + mint accent.
   Accent-picker friendly: --color-primary is left to per-accent rules so
   the legacy footer swatches (blue/purple/gold/slate) still take effect. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* === 1. Force-dark token palette (G language, teal) === */
:root,
:root.theme-light,
:root.theme-dark,
html[data-theme="light"],
html[data-theme="dark"] {
  --color-bg: #0a2420 !important;
  --color-surface: #0e3a36 !important;
  --color-surface-2: #103e3a !important;
  --color-border: rgba(232, 245, 240, 0.10) !important;
  --color-divider: rgba(232, 245, 240, 0.06) !important;
  --color-text: #e8f5f0 !important;
  /* Bumped 0.65 → 0.86 and 0.4 → 0.70 for AA-friendly contrast on
     secondary card text ("28 templates", session metadata, etc.).
     Original values read as dim grey on the deep teal surface. */
  --color-text-muted: rgba(232, 245, 240, 0.86) !important;
  --color-text-faint: rgba(232, 245, 240, 0.70) !important;
  --color-text-inverse: #0a2420 !important;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  --shadow-lg: 0 24px 60px rgba(62, 224, 160, 0.18), 0 18px 50px rgba(0, 0, 0, 0.45) !important;

  --color-danger: #ff8a8a !important;
  --color-danger-light: #ffb0b0 !important;
  --color-danger-strong: #ff5a5a !important;
  --color-danger-hover: #ffb0b0 !important;
  --color-danger-vivid: #ff5a5a !important;
  --color-warning: #f4d574 !important;
  --color-warning-subtle: #c8a848 !important;
  --color-muted: rgba(232, 245, 240, 0.72) !important;

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;

  color-scheme: dark;
}

/* === 1b. Default brand mint accent (when no swatch picked / "green" picked).
   Scoped so user-picked accents (blue / purple / gold / slate) still win
   via the existing rules in index.html. === */
html:not([data-accent]),
html[data-accent="green"] {
  --color-primary: #3ee0a0 !important;
  --color-primary-hover: #5fe6b0 !important;
  --color-primary-highlight: rgba(62, 224, 160, 0.14) !important;
}

/* === 1c. Re-affirm legacy non-green accents with !important so they win
   over any hardcoded terracotta leftovers in the inline stylesheet. === */
html[data-accent="blue"]    { --color-primary: #93c5fd !important; --color-primary-hover: #bfdbfe !important; --color-primary-highlight: rgba(147,197,253,0.16) !important; }
html[data-accent="purple"]  { --color-primary: #c4b5fd !important; --color-primary-hover: #ddd6fe !important; --color-primary-highlight: rgba(196,181,253,0.16) !important; }
html[data-accent="gold"]    { --color-primary: #fcd34d !important; --color-primary-hover: #fde68a !important; --color-primary-highlight: rgba(252,211,77,0.16) !important; }
html[data-accent="slate"]   { --color-primary: #cbd5e1 !important; --color-primary-hover: #e2e8f0 !important; --color-primary-highlight: rgba(203,213,225,0.16) !important; }

/* === 2. Body base + ambient G layers === */
html, body {
  background: #0a2420 !important;
  color: #e8f5f0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body {
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(232, 245, 240, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 245, 240, 0.012) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: -1;
}
body::after {
  content: '';
  position: fixed;
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 800px;
  max-width: 100vw;
  background: radial-gradient(ellipse at center, rgba(62, 224, 160, 0.10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* === 3. Surfaces, panels, cards === */
.panel, .card, .hero-card, .workstation-promote, .pmg-panel,
.workspace-panel, .pmg-card, .pmg-surface {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text);
}

/* Site header */
.site-header, header.site-header, .pmg-site-header {
  background: rgba(10, 36, 32, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(232, 245, 240, 0.06) !important;
}

/* === 4. Inputs === */
input[type="text"], input[type="email"], input[type="search"],
input[type="number"], input[type="password"], input[type="url"],
textarea, select {
  background: #0e3a36 !important;
  color: #e8f5f0 !important;
  border-color: rgba(232, 245, 240, 0.12) !important;
  font-family: 'Inter', sans-serif !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(232, 245, 240, 0.4) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: color-mix(in srgb, var(--color-primary) 60%, transparent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
}

/* Main goal textarea */
#goal {
  min-height: 120px !important;
  border-radius: 13px !important;
  background: #0e3a36 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  padding: 16px 18px !important;
}
.goal-wrap, .goal-field { position: relative; }

/* === 5. Buttons === */
.btn, button.btn, .cta, .primary-cta, button.primary {
  font-family: 'Inter', sans-serif !important;
  border-radius: 10px !important;
}
.btn-primary, .primary-cta, button.primary {
  background: var(--color-primary) !important;
  color: #0a2420 !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  box-shadow: 0 0 24px color-mix(in srgb, var(--color-primary) 32%, transparent) !important;
}
.btn-primary:hover, .primary-cta:hover, button.primary:hover {
  background: var(--color-primary-hover) !important;
  color: #0a2420 !important;
  box-shadow: 0 0 32px color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
}

/* Secondary / ghost */
.btn-secondary, .btn-ghost, button.secondary {
  background: transparent !important;
  color: rgba(232, 245, 240, 0.85) !important;
  border: 1px solid rgba(232, 245, 240, 0.14) !important;
}
.btn-secondary:hover, .btn-ghost:hover, button.secondary:hover {
  background: rgba(232, 245, 240, 0.04) !important;
  border-color: rgba(232, 245, 240, 0.22) !important;
}

/* === 6. Headings & display type === */
h1, h2, h3, h4, .hero-heading, .panel-head h2, .hero-card-title {
  font-family: 'Inter', sans-serif !important;
  color: #e8f5f0 !important;
  letter-spacing: -0.025em !important;
  font-weight: 600 !important;
}
.highlight, .accent, em.accent, .hero-heading-highlight {
  color: var(--color-primary) !important;
}
.hero-heading {
  background: linear-gradient(180deg, #e8f5f0 0%, #8aa8a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
.hero-heading .highlight,
.hero-heading .hero-heading-highlight {
  background: none;
  -webkit-text-fill-color: var(--color-primary);
  color: var(--color-primary) !important;
}

/* Eyebrows / micro-labels */
.eyebrow, .label, .step-label, .panel-eyebrow, .step-eyebrow, .kicker {
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  color: var(--color-primary) !important;
  font-weight: 500 !important;
}

/* === 7. Pills, chips, badges === */
.pill, .chip, .badge, .tag {
  background: rgba(232, 245, 240, 0.04) !important;
  border: 1px solid rgba(232, 245, 240, 0.10) !important;
  color: rgba(232, 245, 240, 0.8) !important;
}
.chip-primary, .badge-primary, .pill-primary {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--color-primary) 38%, transparent) !important;
  color: var(--color-primary) !important;
}

/* === 8. Links === */
a, a:visited { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

/* === 10. Code & mono === */
code, kbd, samp {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  background: rgba(232, 245, 240, 0.06);
  border-radius: 4px;
}
pre {
  background: #0d2d2a !important;
  border: 1px solid rgba(232, 245, 240, 0.06) !important;
  color: #e8f5f0 !important;
  padding: 14px 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
pre code { background: transparent !important; }

/* === 11. Scrollbars === */
* { scrollbar-color: color-mix(in srgb, var(--color-primary) 45%, transparent) rgba(232, 245, 240, 0.04); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(232, 245, 240, 0.03); }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 38%, transparent);
  border-radius: 5px;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-primary) 60%, transparent); }

/* === 12. Dialogs / modals === */
dialog, .modal, .overlay-card, [role="dialog"] {
  background: #0e3a36 !important;
  color: #e8f5f0 !important;
  border: 1px solid rgba(232, 245, 240, 0.10) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
}
dialog::backdrop, .modal-backdrop {
  background: rgba(5, 18, 16, 0.7) !important;
  backdrop-filter: blur(4px);
}

/* === 13. Quick Win overlay === */
#pmg-quick-win-overlay {
  background: #0a2420 !important;
  color: #e8f5f0 !important;
}
#pmg-quick-win-overlay::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 700px;
  max-width: 100vw;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 70%);
  pointer-events: none;
}
#pmg-quick-win-overlay .pmg-qw-card,
#pmg-quick-win-overlay .pmg-qw-panel {
  background: #0e3a36 !important;
  border-color: rgba(232, 245, 240, 0.10) !important;
}

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

.theme-toggle, .pmg-theme-toggle, [aria-label*="theme" i] {
  color: rgba(232, 245, 240, 0.5) !important;
}

.pmg-workstation-promote, body.pmg-workstation-promote {
  background: #0a2420 !important;
}

.hero-subtext-box {
  background: rgba(14, 58, 54, 0.7) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent) !important;
  border-radius: 12px !important;
}
.hero-subtext, .hero-subtext-box p {
  color: #e8f5f0 !important;
  opacity: 1 !important;
}
.hero-subtext strong, .hero-subtext-box strong { color: var(--color-primary) !important; }

.field, .field-row, .pmg-voice-row, .utility-row { color: #e8f5f0; }

.workspace-eyebrow, .panel-eyebrow, .step-eyebrow {
  color: var(--color-primary) !important;
}

/* T42 Beta banner */
#pmg-t42-beta-banner {
  background: linear-gradient(90deg, #0e3a36 0%, #103e3a 50%, #0e3a36 100%) !important;
  color: var(--color-primary) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 10%, transparent), 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}
#pmg-t42-beta-banner a {
  color: var(--color-primary) !important;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
}
#pmg-t42-beta-banner a:hover { color: var(--color-primary-hover) !important; }
#pmg-t42-beta-banner button.pmg-t42-close { color: #e8f5f0 !important; }
#pmg-t42-beta-banner button.pmg-t42-close:hover {
  background: color-mix(in srgb, var(--color-primary) 16%, transparent) !important;
}

.global-search input,
.site-search input,
input[type="search"] {
  background-color: #0e3a36 !important;
  color: #e8f5f0 !important;
  border: 1px solid rgba(232, 245, 240, 0.1) !important;
}
.global-search input::placeholder,
input[type="search"]::placeholder {
  color: rgba(232, 245, 240, 0.4) !important;
}
.global-search-label, .site-search-label {
  color: rgba(232, 245, 240, 0.55) !important;
}

.workstation-promote .panel,
.pmg-workstation-promote .panel,
.hero-card,
.workspace-panel {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent), 0 24px 60px rgba(0, 0, 0, 0.35) !important;
}