/* ==========================================================================
   TreeMind OS — Design tokens
   Fonte única de verdade para cor, espaçamento, raio, sombra e tipografia.
   Alterar um valor aqui propaga para todo o produto.
   ========================================================================== */

:root {
  /* --- Superfícies ---------------------------------------------------- */
  --bg-primary: #06111f;
  --bg-secondary: #0a1728;
  --bg-card: #0d1b2d;
  --bg-card-hover: #11233a;
  --bg-elevated: #12243c;
  --bg-input: #0a1728;

  /* --- Marca ---------------------------------------------------------- */
  --brand-primary: #1d3254;
  --brand-primary-soft: rgba(29, 50, 84, 0.55);
  --brand-accent: #6c63ff;
  --brand-accent-soft: rgba(108, 99, 255, 0.14);

  /* --- Texto ---------------------------------------------------------- */
  --text-primary: #f5f7fb;
  --text-secondary: #aab6c8;
  --text-muted: #6f7d91;

  /* --- Bordas --------------------------------------------------------- */
  --border-color: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);

  /* --- Cores semânticas ----------------------------------------------- */
  --blue: #438cff;
  --green: #38c77b;
  --purple: #9b6df3;
  --orange: #f5a43c;
  --red: #f05f68;
  --pink: #e56f96;
  --cyan: #3fc8d6;

  /* Versões translúcidas para fundos de ícone e badges. */
  --blue-soft: rgba(67, 140, 255, 0.14);
  --green-soft: rgba(56, 199, 123, 0.14);
  --purple-soft: rgba(155, 109, 243, 0.14);
  --orange-soft: rgba(245, 164, 60, 0.14);
  --red-soft: rgba(240, 95, 104, 0.14);
  --pink-soft: rgba(229, 111, 150, 0.14);
  --cyan-soft: rgba(63, 200, 214, 0.14);

  /* --- Tipografia ----------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  --fs-xs: 0.6875rem; /* 11px */
  --fs-sm: 0.75rem;   /* 12px */
  --fs-base: 0.8125rem;/* 13px */
  --fs-md: 0.875rem;  /* 14px */
  --fs-lg: 1rem;      /* 16px */
  --fs-xl: 1.25rem;   /* 20px */
  --fs-2xl: 1.5rem;   /* 24px */
  --fs-3xl: 1.75rem;  /* 28px */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Espaçamento (escala de 4px) ------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* --- Raio ----------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;

  /* --- Sombras (sutis; profundidade, não drama) ------------------------ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px rgba(108, 99, 255, 0.4);

  /* --- Movimento ------------------------------------------------------ */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms var(--ease);
  --t-base: 200ms var(--ease);
  --t-slow: 250ms var(--ease);

  /* --- Layout --------------------------------------------------------- */
  --sidebar-w: 208px;
  --sidebar-w-compact: 68px;
  --header-h: 72px;
  --content-max: 1560px;
  --z-drawer: 60;
  --z-panel: 70;
  --z-modal: 80;
  --z-toast: 90;
}