/* ============================================================
   MeetAI — Shared theme · Framer design language
   (VoltAgent/awesome-design-md → design-md/framer/DESIGN.md)

   Near-black canvas (#090909) · surface lift #141414/#1c1c1c ·
   binary text hierarchy (ink #fff / ink-muted #999) · ONE blue
   accent #0099ff reserved for links & focus rings · violet→magenta
   gradient family for spotlight accents · pill CTAs · Inter body
   (with Thai fallback Anuphan/IBM Plex Sans Thai) + tight tracking.

   Linked AFTER each page's <style> so these :root tokens win.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Anuphan:wght@300;400;500;600;700&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');

:root{
  /* ── Type: Inter voice first, Thai-capable fallbacks ── */
  --font-ui:'Inter','Anuphan','IBM Plex Sans Thai',system-ui,-apple-system,sans-serif;
  --font-display:'Inter','IBM Plex Sans Thai','Anuphan',system-ui,sans-serif;

  /* ── Light: clean neutral inverse (white canvas, black pills) ── */
  --bg:#fafafa; --bg2:#ffffff; --bg3:#f0f0f0; --side:#f5f5f5;
  --txt:#0a0a0a; --txt2:#757575; --txt3:#a8a8a8;
  --prim:#5a46e8; --prim-hover:#4936c9; --accent:#c93fe0; --cyan:#0084ff;
  --green:#15803d; --red:#dc2650; --yellow:#b45309; --blue:#0084ff; --orange:#d9602a;
  --border:#e5e5e5; --border-strong:#d4d4d4;
  --hover:rgba(10,10,10,0.04); --scrim:rgba(10,10,10,0.42);
  --shadow:0 1px 3px rgba(10,10,10,0.05), 0 8px 24px rgba(10,10,10,0.06);
  --shadow-lg:0 16px 50px rgba(10,10,10,0.14);

  /* aliases → unify every page's variable names onto these tokens */
  --primary:var(--prim); --primary-hover:var(--prim-hover); --primary2:var(--prim-hover);
  --accent2:var(--accent);
  --s1:var(--bg2); --s2:var(--bg3); --surface:var(--side); --card:var(--bg2);
  --border-hover:var(--border-strong); --border2:var(--border-strong); --glass-border:var(--border);
  --grad:linear-gradient(135deg,var(--prim),var(--accent));
  --font:var(--font-ui);
}

/* ── Dark: Framer near-black canvas (the brand IS dark) ── */
:root[data-theme="dark"]{
  --bg:#090909; --bg2:#141414; --bg3:#1c1c1c; --side:#0c0c0c;
  --txt:#ffffff; --txt2:#999999; --txt3:#5e5e5e;
  --prim:#6a4cf5; --prim-hover:#5a3ee8; --accent:#d44df0; --cyan:#0099ff;
  --green:#22c55e; --red:#ff5577; --yellow:#f5a623; --blue:#0099ff; --orange:#ff7a3d;
  --border:rgba(255,255,255,0.09); --border-strong:rgba(255,255,255,0.16);
  --hover:rgba(255,255,255,0.05); --scrim:rgba(0,0,0,0.65);
  --shadow:0 2px 10px rgba(0,0,0,0.35); --shadow-lg:0 18px 50px rgba(0,0,0,0.55);
}

/* ── Type system applied app-wide (beats hardcoded fonts on each page) ── */
body, button, input, textarea, select, .btn, [class*="btn"]{
  font-family: var(--font-ui) !important;
}
body{ font-feature-settings:'cv01','cv05','cv11'; }
h1, h2, h3, h4, .brand h1, .logo-text, .ns-hero h2, .analytics-header h2{
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em;
}

/* ── The one chromatic signal: blue focus ring on every input ── */
input:focus, textarea:focus, select:focus{
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(0,153,255,0.15) !important;
  outline: none !important;
}

/* ── Pill CTAs — the Framer button vocabulary (shared classes only) ── */
.btn, .ns-btn, .refresh-btn{ border-radius:100px !important; }

/* ── Quiet neutral scrollbar ── */
::-webkit-scrollbar{ width:6px; height:6px }
::-webkit-scrollbar-thumb{ background:var(--bg3); border-radius:3px }
::-webkit-scrollbar-thumb:hover{ background:var(--border-strong) }

/* Smooth flip between themes */
body, .sidebar, .card, .modal, header, aside, main{
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ── Light-mode readability fixes (this app was built dark-first) ──
   Force gradient-clipped headings to a solid readable violet on white. */
:root:not([data-theme="dark"]) .brand h1,
:root:not([data-theme="dark"]) .logo-text,
:root:not([data-theme="dark"]) .ns-hero h2,
:root:not([data-theme="dark"]) .analytics-header h2,
:root:not([data-theme="dark"]) .gradient-text{
  background:none !important;
  -webkit-text-fill-color:var(--prim) !important;
  color:var(--prim) !important;
}
:root:not([data-theme="dark"]) input,
:root:not([data-theme="dark"]) textarea,
:root:not([data-theme="dark"]) select{ color:var(--txt); }
:root:not([data-theme="dark"]) input::placeholder,
:root:not([data-theme="dark"]) textarea::placeholder{ color:var(--txt3); }

/* ── Floating theme toggle (injected by theme.js) ── */
#app-theme-btn{
  position:fixed; z-index:99999; bottom:18px; left:18px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border); background:var(--bg2); color:var(--txt);
  font-size:18px; cursor:pointer; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; line-height:1;
  transition:transform .15s ease, box-shadow .15s ease;
}
#app-theme-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }

/* ── Gentle page-load reveal (one high-impact moment) ── */
@keyframes appFadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: no-preference){
  #new-session-view, .ns-hero, .modal{ animation:appFadeIn .4s ease both; }
}