/* ============================================================================
   IOUX Design Tokens  —  the single source of brand truth
   ----------------------------------------------------------------------------
   Shared across the IOUX product suite (RAG Console, Pre-Sales 360-AI, AI-Bot,
   LMS). Defined as CSS custom properties AND bound to Bootstrap 5's own
   --bs-* variables, so native Bootstrap components inherit the brand for free.

   In production these same values live in scss/_tokens.scss and compile into
   Bootstrap's Sass variables ($primary, $theme-colors, $border-radius, …).
   ============================================================================ */

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

:root {
  /* ---- Brand: IOUX / AI-Bot emerald green ---- */
  --brand: #13ba82;
  --brand-600: #0fa576;
  --brand-700: #0c8a63;
  --brand-400: #34c99a;
  --brand-050: #e9f9f2;
  --brand-100: #cdf1e2;
  --brand-grad: linear-gradient(135deg, #18c98d 0%, #10a878 52%, #0a7d5b 100%);
  --brand-ring: rgba(19, 186, 130, 0.24);

  /* ---- IOUX corporate marks (secondary accents) ---- */
  --ioux-ink: #333333;
  --ioux-blue: #1e6298;
  --ioux-blue-050: #eaf1f8;
  --ioux-amber: #f4aa2e;
  --ioux-amber-050: #fdf4e3;

  /* ---- Suite accent palette (charts, tags, category tiles) ---- */
  --accent-indigo: #6366f1;
  --accent-sky: #38bdf8;
  --accent-orange: #f79e0c;
  --accent-pink: #ec4899;
  --accent-violet: #8b5cf6;
  --accent-teal: #14b8a6;

  /* ---- Semantic ---- */
  --success: #13ba82;
  --success-050: #e9f9f2;
  --warning: #f4aa2e;
  --warning-050: #fff8ec;
  --danger: #ef4444;
  --danger-050: #fef2f2;
  --info: #1e6298;
  --info-050: #eaf1f8;

  /* ---- Typography ---- */
  --font-display: "Poppins", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --fs-11: 11px;  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;
  --fs-16: 16px;  --fs-18: 18px;  --fs-22: 22px;  --fs-28: 28px;  --fs-34: 34px;

  /* ---- Spacing scale (4pt) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px;

  /* ---- Radius ---- */
  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.12s;
  --dur: 0.2s;
  --dur-slow: 0.32s;

  /* ---- Layout dimensions ---- */
  --rail-w: 248px;
  --rail-w-collapsed: 72px;
  --topbar-h: 62px;
  --z-rail: 40; --z-topbar: 30; --z-drawer: 60; --z-modal: 70; --z-toast: 90;

  /* ==== THEME: LIGHT (default) ==================================== */
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --surface-3: #eef2f8;
  --rail-bg: #ffffff;
  --ink: #0f172a;
  --ink-2: #334155;
  --ink-3: #64748b;
  --ink-4: #94a3b8;
  --line: #e7ebf2;
  --line-2: #d8dfe9;
  --overlay: rgba(15, 23, 42, 0.42);

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.07), 0 2px 6px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 20px 44px -20px rgba(16, 24, 40, 0.3);
  --shadow-brand: 0 10px 22px -10px rgba(19, 186, 130, 0.5);

  /* ---- Bootstrap 5 bindings ---- */
  --bs-primary: #13ba82;
  --bs-primary-rgb: 19, 186, 130;
  --bs-link-color: #0c8a63;
  --bs-link-hover-color: #0a7d5b;
  --bs-body-font-family: var(--font-body);
  --bs-body-bg: #f4f7fb;
  --bs-body-color: #334155;
  --bs-border-color: #e7ebf2;
  --bs-border-radius: 10px;
  --bs-focus-ring-color: rgba(19, 186, 130, 0.24);

  color-scheme: light;
}

/* ==== THEME: DARK ================================================== */
[data-bs-theme="dark"] {
  --brand: #1ccf92;
  --brand-600: #16bd84;
  --brand-700: #12a473;
  --brand-050: rgba(28, 207, 146, 0.12);
  --brand-100: rgba(28, 207, 146, 0.2);
  --brand-ring: rgba(28, 207, 146, 0.3);

  --ioux-blue: #4d92cf;
  --ioux-blue-050: rgba(77, 146, 207, 0.14);
  --ioux-amber: #f6b34a;
  --ioux-amber-050: rgba(246, 179, 74, 0.13);

  --success: #1ccf92;
  --success-050: rgba(28, 207, 146, 0.13);
  --warning: #f6b34a;
  --warning-050: rgba(246, 179, 74, 0.13);
  --danger: #f87171;
  --danger-050: rgba(248, 113, 113, 0.13);
  --info: #4d92cf;
  --info-050: rgba(77, 146, 207, 0.14);

  --bg: #0b0f15;
  --surface: #141a22;
  --surface-2: #1a212b;
  --surface-3: #212a35;
  --rail-bg: #10151c;
  --ink: #eef2f8;
  --ink-2: #c3ccd8;
  --ink-3: #8b97a6;
  --ink-4: #64707e;
  --line: #262f3b;
  --line-2: #313b49;
  --overlay: rgba(0, 0, 0, 0.62);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 22px 48px -18px rgba(0, 0, 0, 0.72);
  --shadow-brand: 0 10px 24px -10px rgba(28, 207, 146, 0.45);

  --bs-primary: #1ccf92;
  --bs-primary-rgb: 28, 207, 146;
  --bs-link-color: #34c99a;
  --bs-link-hover-color: #57d6ae;
  --bs-body-bg: #0b0f15;
  --bs-body-color: #c3ccd8;
  --bs-border-color: #262f3b;
  --bs-focus-ring-color: rgba(28, 207, 146, 0.3);

  color-scheme: dark;
}