/* Standard AI Hub — shared design tokens
   Used by landing.html, auth.html, and app.html so all three
   pages stay visually consistent without duplicating CSS. */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0f;
  --surface:#111118;
  --surface2:#1a1a24;
  --surface3:#22222f;
  --border:#2a2a3a;
  --border2:#353548;
  --text:#f0f0f8;
  --text2:#9090b0;
  --text3:#5a5a7a;
  --accent:#6c63ff;
  --accent2:#8b83ff;
  --accent-bg:#1e1b3a;
  --green:#22c55e;
  --green-bg:#0d2a1a;
  --amber:#f59e0b;
  --amber-bg:#2a1f0a;
  --red:#ef4444;
  --radius:12px;
  --radius-sm:8px;
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;overflow-x:hidden;transition:background 0.2s,color 0.2s}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:4px}

/* ── LIGHT THEME ── */
:root[data-theme="light"]{
  --bg:#f7f7fb;
  --surface:#ffffff;
  --surface2:#f1f1f6;
  --surface3:#e8e8f0;
  --border:#e1e1ea;
  --border2:#cbcbd9;
  --text:#14141f;
  --text2:#5a5a72;
  --text3:#8a8a9e;
  --accent:#6c63ff;
  --accent2:#5750d6;
  --accent-bg:#eeebff;
  --green:#16a34a;
  --green-bg:#e8f8ee;
  --amber:#b45309;
  --amber-bg:#fdf3e0;
  --red:#dc2626;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}
}

.wrap{max-width:1120px;margin:0 auto;padding:0 2rem}

.eyebrow{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent2);margin-bottom:0.9rem;display:flex;align-items:center;gap:8px}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ── LOGO (shared mark used in nav/header across pages) ── */
.logo{display:flex;align-items:center;gap:9px}
.logo-mark{width:30px;height:30px;background:var(--accent);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark svg{width:17px;height:17px;fill:white}
.logo-name{font-size:15px;font-weight:600;letter-spacing:-0.2px}

/* ── BUTTONS ── */
.btn{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;border-radius:var(--radius-sm);cursor:pointer;transition:all 0.2s;letter-spacing:0.1px;border:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-ghost{background:none;color:var(--text2);padding:9px 6px}
.btn-ghost:hover{color:var(--text)}
.btn-primary{background:var(--accent);color:white;padding:9px 18px}
.btn-primary:hover{background:var(--accent2);transform:translateY(-1px)}
.btn-primary:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.btn-lg{padding:13px 26px;font-size:14px}
.btn-block{width:100%}

/* ── THEME TOGGLE ── */
.theme-toggle{width:34px;height:34px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;flex-shrink:0}
.theme-toggle:hover{color:var(--text);border-color:var(--border2)}
.theme-toggle svg{width:16px;height:16px}