/**
 * Syok AI — shared design tokens + core components.
 * Used by BOTH the marketing landing page (public/index.html) and the
 * dashboard app (public/app/index.html) so they always look like the same
 * product. Page-specific layout (nav bars, hero grids, provider rows,
 * bottom tab bar, etc.) lives in each page's own <style> block and just
 * reads these variables — never redefines its own colors.
 *
 * Theme switching: <html data-theme="dark|light">, set by theme.js and
 * persisted to localStorage. No explicit choice yet → falls back to the
 * visitor's OS preference (prefers-color-scheme) via the media query at
 * the bottom, so the very first paint already matches their system.
 */

/* Blob values calibrated by sampling actual pixel colors from the
   reference mockup: dark mode reads as deep navy-black on the left with a
   vivid magenta/pink glow arcing in from the RIGHT edge (brightest around
   the upper-right, warming toward orange lower-right); light mode is a
   gentler version of the same right-weighted lavender→pink→peach wash. */
:root,
:root[data-theme="dark"] {
  --bg: #0a0714;
  --bg2: #140f24;
  --card: #1a1530;
  --card-hi: #221a3d;
  --border: #322a52;
  --text: #f3f1fb;
  --muted: #a89fc4;
  --input-bg: #0f0b1e;
  --shadow-card: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
  --shadow-btn: 0 8px 20px -10px rgba(236, 30, 130, 0.6);
  --blob-1: rgba(139, 92, 246, 0.32);
  --blob-2: rgba(236, 30, 130, 0.58);
  --blob-3: rgba(251, 146, 60, 0.4);
  --nav-bg: rgba(10, 7, 20, 0.72);
}

:root[data-theme="light"] {
  --bg: #fbf8ff;
  --bg2: #ffffff;
  --card: #ffffff;
  --card-hi: #ffffff;
  --border: #e7e1f5;
  --text: #191333;
  --muted: #6c6488;
  --input-bg: #f6f4fc;
  --shadow-card: 0 10px 30px -18px rgba(90, 60, 150, 0.18);
  --shadow-btn: 0 8px 20px -10px rgba(236, 30, 130, 0.35);
  --blob-1: rgba(139, 92, 246, 0.22);
  --blob-2: rgba(236, 30, 130, 0.2);
  --blob-3: rgba(251, 146, 60, 0.3);
  --nav-bg: rgba(255, 255, 255, 0.72);
}

/* First paint, before any toggle has ever been clicked: follow the OS. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg: #fbf8ff;
    --bg2: #ffffff;
    --card: #ffffff;
    --card-hi: #ffffff;
    --border: #e7e1f5;
    --text: #191333;
    --muted: #6c6488;
    --input-bg: #f6f4fc;
    --shadow-card: 0 10px 30px -18px rgba(90, 60, 150, 0.18);
    --shadow-btn: 0 8px 20px -10px rgba(236, 30, 130, 0.35);
    --blob-1: rgba(139, 92, 246, 0.22);
    --blob-2: rgba(236, 30, 130, 0.2);
    --blob-3: rgba(251, 146, 60, 0.3);
    --nav-bg: rgba(255, 255, 255, 0.72);
  }
}

:root {
  --green: #2ee6a6;
  --yellow: #ffd166;
  --red: #ff5c8a;
  --violet: #8b5cf6;
  --pink: #ec1e82;
  --orange: #fb923c;
  --cyan: #22d3ee;
  --grad: linear-gradient(135deg, var(--violet), var(--pink) 55%, var(--orange));
  --grad-soft: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(236, 30, 130, 0.14) 55%, rgba(251, 146, 60, 0.14));
  --radius: 20px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(800px 650px at -5% -10%, var(--blob-1), transparent 62%),
    radial-gradient(950px 800px at 105% 30%, var(--blob-2), transparent 60%),
    radial-gradient(750px 650px at 98% 95%, var(--blob-3), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  background-size: 100% 100%;
  min-height: 100vh;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* --- Brand mark: gradient bolt chip + wordmark, identical everywhere --- */
.brandrow { display: flex; align-items: center; gap: 10px; }
.bolt {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 6px 18px -6px rgba(236, 30, 130, 0.55);
  animation: boltwiggle 3.2s ease-in-out infinite;
}
@keyframes boltwiggle {
  0%, 92%, 100% { transform: rotate(0deg) scale(1); }
  94% { transform: rotate(-8deg) scale(1.06); }
  96% { transform: rotate(7deg) scale(1.06); }
  98% { transform: rotate(0deg) scale(1); }
}
.wordmark {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); text-decoration: none;
}
.grad-text {
  background: var(--grad);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradscroll 5s linear infinite;
}
@keyframes gradscroll { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

/* --- Theme toggle: a small pill sun/moon switch --- */
.theme-toggle {
  margin: 0; padding: 0; width: 38px; height: 38px; flex: none;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.theme-toggle:hover { border-color: var(--violet); transform: translateY(-1px) scale(1); box-shadow: none; }

/* --- Cards --- */
.card {
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.25s ease, border-color 0.25s ease;
}
.card:hover { transform: translateY(-2px); border-color: rgba(139, 92, 246, 0.5); }
.card h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px; margin: 0 0 14px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 6px;
}

/* --- Form controls --- */
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 6px; font-weight: 500; }
input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.25s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.85; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}

/* --- Buttons --- */
button {
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  font-family: "Space Grotesk", sans-serif;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
button:hover { transform: translateY(-1px) scale(1.015); }
button:active { transform: translateY(0) scale(0.99); }
button:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
button.secondary {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  box-shadow: none;
}
button.secondary:hover { border-color: var(--violet); box-shadow: none; }
button.danger {
  background: transparent;
  border: 1px solid rgba(255, 92, 138, 0.5);
  color: var(--red);
  padding: 7px 12px;
  font-size: 12px;
  margin-top: 0;
  box-shadow: none;
}
button.ghost-link {
  background: transparent; border: none; color: var(--cyan); padding: 0; margin: 0;
  font-weight: 600; box-shadow: none; text-decoration: underline; font-size: 13px;
}

/* --- Small shared bits --- */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: rgba(139, 92, 246, 0.14); color: var(--violet); border: 1px solid rgba(139, 92, 246, 0.4);
  letter-spacing: 0.02em; vertical-align: middle;
}
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: rgba(46, 230, 166, 0.15); color: var(--green); border: 1px solid rgba(46, 230, 166, 0.35);
}
.msg { font-size: 13px; margin-top: 8px; min-height: 18px; font-weight: 500; }
.msg.ok { color: var(--green); }
.msg.err { color: var(--red); }
