/* Imported from the khabot-new-design demo (read-only source). These files are ADDITIVE:
   the legacy assets/ui.css + assets/website.css stay untouched because the admin board and
   apps/ still load them. Never merge the two systems on one page. */
/* ==========================================================================
   KhaBot design tokens — single source of truth for color, type, radius, motion.
   Light + dark are defined ONCE via light-dark(); the active scheme is picked by
   `color-scheme` (System) or forced with html[data-theme="light|dark"].
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Brand palette (from the KhaBot mark: navy body + blue visor) ---- */
  --navy-950: #040A1C;
  --navy-900: #071230;
  --navy-800: #0B1A45;
  --navy-700: #0E3674;   /* logo navy */
  --blue-700: #1749B8;
  --blue-600: #1E5EEB;   /* primary accent (light) */
  --blue-500: #3B7BF6;
  --blue-400: #5B93F8;   /* primary accent (dark) */
  --blue-300: #93B8FB;
  --cyan-400: #38BDF8;   /* visor glow */
  --mint-400: #5EEAD4;

  /* ---- Service-family hues (used for chips, glows, borders in the catalog) ---- */
  --hue-ai:      #7C6CF7;   /* violet   — language models */
  --hue-web:     #0EA5E9;   /* sky      — web search / fetch / research */
  --hue-social:  #EC4899;   /* pink     — X / YouTube / Reddit scraping */
  --hue-media:   #F59E0B;   /* amber    — image / video / speech / OCR */
  --hue-storage: #10B981;   /* emerald  — documents / files */
  --hue-compute: #F97316;   /* orange   — sandboxes */
  --hue-assets:  #14B8A6;   /* teal     — stock media */

  /* ---- Surfaces ---- */
  --bg:          light-dark(#F6F7FB, #070B16);
  --bg-elev:     light-dark(#FFFFFF, #0D1322);
  --bg-sunken:   light-dark(#EEF1F6, #050812);
  --bg-hover:    light-dark(#F1F3F8, #121A2D);
  --bg-inset:    light-dark(#F9FAFC, #0A1020);
  --border:      light-dark(#E4E8EF, #1C2538);
  --border-strong: light-dark(#CBD3DF, #2B3852);
  --overlay:     light-dark(rgba(9, 14, 30, .45), rgba(0, 0, 0, .6));

  /* ---- Text ---- */
  --text:   light-dark(#0D1220, #E9EDF5);
  --text-2: light-dark(#4B5569, #A7B1C4);
  --text-3: light-dark(#7C879B, #6C778D);
  --text-inv: light-dark(#FFFFFF, #070B16);

  /* ---- Accent ---- */
  --accent:       light-dark(#1E5EEB, #5B93F8);
  --accent-hover: light-dark(#1749B8, #93B8FB);
  --accent-ink:   light-dark(#FFFFFF, #06112B);
  --accent-soft:  light-dark(#E8EFFF, #13224A);
  --accent-ring:  light-dark(rgba(30, 94, 235, .28), rgba(91, 147, 248, .35));

  /* ---- Semantic ---- */
  --ok:          light-dark(#0F8A5A, #34D399);
  --ok-soft:     light-dark(#E3F6EC, #0C2A1E);
  --warn:        light-dark(#B45309, #FBBF24);
  --warn-soft:   light-dark(#FEF3E2, #2C210A);
  --danger:      light-dark(#C6303E, #F87171);
  --danger-soft: light-dark(#FDE8EA, #2E1113);
  --info:        light-dark(#0369A1, #38BDF8);
  --info-soft:   light-dark(#E0F2FE, #0B2437);

  /* ---- Code surfaces are always dark (both themes) ---- */
  --code-bg: #0B1120;
  --code-bg-2: #111A2E;
  --code-border: #1F2A44;
  --code-text: #E2E8F0;
  --code-muted: #7C8BA6;
  --code-key: #93C5FD;
  --code-str: #FCD38D;
  --code-num: #F9A8D4;
  --code-kw: #C4B5FD;
  --code-cmt: #64748B;

  /* ---- Typography ---- */
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Instrument Serif', ui-serif, Georgia, "Times New Roman", serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11.5px; --fs-sm: 13px; --fs-md: 14.5px; --fs-lg: 16px; --fs-xl: 18px;
  --lh: 1.55;
  --track-tight: -.032em;

  /* ---- Radius / shadow / motion ---- */
  --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(10, 16, 32, .06), 0 1px 1px rgba(10, 16, 32, .03);
  --shadow-md: 0 4px 14px rgba(10, 16, 32, .08), 0 1px 3px rgba(10, 16, 32, .05);
  --shadow-lg: 0 24px 60px rgba(10, 16, 32, .18), 0 4px 14px rgba(10, 16, 32, .08);
  --shadow-glow: 0 0 0 1px var(--accent-ring), 0 12px 40px -12px var(--accent-ring);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .18s;

  /* ---- Layout ---- */
  --maxw: 1200px;
  --maxw-wide: 1360px;
  --gutter: clamp(18px, 4vw, 40px);
  --topbar-h: 64px;
  --side-w: 248px;
}

/* Public-Hoster: theme.js always sets html[data-theme="system|light|dark"] (a contract
   shared with the admin board and apps), so "system" is spelled out here instead of
   relying on the attribute being absent. */
html[data-theme="system"] { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

/* Sections that are ALWAYS dark (hero, code panels) override the surface tokens locally. */
.theme-dark {
  color-scheme: dark;
  --bg: #070B16; --bg-elev: #0D1322; --bg-sunken: #050812; --bg-hover: #121A2D; --bg-inset: #0A1020;
  --border: #1C2538; --border-strong: #2B3852;
  --text: #E9EDF5; --text-2: #A7B1C4; --text-3: #6C778D; --text-inv: #070B16;
  --accent: var(--blue-400); --accent-hover: var(--blue-300); --accent-ink: #06112B; --accent-soft: #13224A;
  --accent-ring: rgba(91, 147, 248, .35);
  --ok: #34D399; --ok-soft: #0C2A1E; --warn: #FBBF24; --warn-soft: #2C210A; --danger: #F87171; --danger-soft: #2E1113;
  --info: #38BDF8; --info-soft: #0B2437;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 6px 18px rgba(0,0,0,.45); --shadow-lg: 0 30px 80px rgba(0,0,0,.6);
}