/**
 * Eduard Platform / Eduard OS — Unified Design System Tokens
 * Defines shared typography, color palette, elevations, and component variables
 * across all subsystems (Consultations, SMM Planner, Bot Builder, Sites, CRM Gateway).
 */

:root {
  /* --- Typography System --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Font sizes */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13.5px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* --- Light Palette --- */
  --ink: #17213a;
  --ink-secondary: #35445b;
  --muted: #68738a;
  --muted-2: #9ba5b8;
  --canvas: #f7f8fb;
  --surface: #ffffff;
  --surface-hover: #fcfdff;
  --line: #e8ebf1;
  --line-strong: #dce1ea;

  /* --- Brand Accents --- */
  --blue: #266df0;
  --blue-soft: #eef4ff;
  --blue-deep: #1558d6;
  --green: #1f8b68;
  --green-soft: #e9f7f1;
  --amber: #ad6b12;
  --amber-soft: #fff5df;
  --red: #b42318;
  --red-soft: #fff5f4;
  --purple: #6346ed;
  --purple-soft: #eceaff;

  /* --- Navigation / Sidebar --- */
  --sidebar: #172235;
  --sidebar-muted: #9aa8bd;
  --sidebar-hover: #263348;
  --sidebar-active: #2a63ce;
  --sidebar-width: 252px;

  /* --- Radii & Shadows --- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 3px rgba(23, 33, 58, 0.05);
  --shadow-md: 0 4px 12px rgba(23, 33, 58, 0.08);
  --shadow: 0 12px 30px rgba(28, 44, 72, 0.08);
  --float: 0 22px 60px rgba(19, 31, 52, 0.18);
}

/* --- Dark Palette Overrides --- */
html[data-theme="dark"] {
  --ink: #e6edf7;
  --ink-secondary: #c5d3e8;
  --muted: #afbdd0;
  --muted-2: #9baac0;
  --canvas: #101722;
  --surface: #192332;
  --surface-hover: #223147;
  --line: #2e3c50;
  --line-strong: #43546c;

  --sidebar: #101927;
  --sidebar-muted: #acbad0;
  --sidebar-hover: #25364b;
  --sidebar-active: #326bd1;

  --blue: #84b3ff;
  --blue-soft: #203653;
  --blue-deep: #a3c6ff;
  --green: #7ce1af;
  --green-soft: #193b32;
  --amber: #ffd08a;
  --amber-soft: #3c3020;
  --red: #ffaba4;
  --red-soft: #392126;
  --purple: #bdb1ff;
  --purple-soft: #352e56;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  --float: 0 22px 60px rgba(0, 0, 0, 0.6);
}

/* Unified Base Elements */
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--canvas);
}

/* External Link Indicator */
.nav-external .external-arrow,
.nav-external [data-lucide="arrow-up-right"] {
  opacity: 0.65;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.nav-external:hover .external-arrow,
.nav-external:hover [data-lucide="arrow-up-right"] {
  opacity: 1;
  transform: translate(1px, -1px);
}