/* =========================================================
   BGM Flow AI — Design Tokens (Neumorphism / Soft UI)
   ---------------------------------------------------------
   :root            → tema ESCURO (padrão do app)
   body.light-theme → tema CLARO
   Os nomes de variáveis foram preservados para compatibilidade
   com todo o HTML/JS existente. A estética mudou para soft UI:
   superfícies da mesma cor + sombras duplas (clara/escura).
   ========================================================= */

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

:root {
  /* ── Cor base do soft UI (ESCURO) ──────────────────────── */
  --neu-bg:        #2b2f38; /* cor única de superfície */
  --sh-dark:       #20232a; /* sombra inferior-direita */
  --sh-light:      #363c47; /* luz superior-esquerda */

  /* Backgrounds — quase todos iguais à base (soft UI) */
  --bg-base:       #2b2f38;
  --bg-surface:    #2b2f38;
  --bg-elevated:   #2f343e;
  --bg-overlay:    #333843;
  --bg-hover:      #2f343e;
  --bg-active:     #25282f;

  /* Brand (Cyan suave & Índigo) */
  --brand-primary:       #22d3ee;
  --brand-primary-dim:   #0891b2;
  --brand-primary-glow:  rgba(34, 211, 238, 0.28);
  --brand-secondary:     #a78bfa;
  --brand-secondary-dim: #7c3aed;
  --brand-secondary-glow:rgba(167, 139, 250, 0.28);
  --brand-gradient:   linear-gradient(135deg, #22d3ee 0%, #818cf8 100%);
  --brand-gradient-r: linear-gradient(135deg, #818cf8 0%, #22d3ee 100%);

  /* Text */
  --text-primary:   #e9eef5;
  --text-secondary: #abb4c4;
  --text-tertiary:  #808a9c;
  --text-disabled:  #565d6c;
  --text-inverse:   #1b1e24;

  /* Status */
  --status-success:       #34d399;
  --status-success-bg:    rgba(52,211,153,0.14);
  --status-success-border:rgba(52,211,153,0.28);

  --status-warning:       #fbbf24;
  --status-warning-bg:    rgba(251,191,36,0.14);
  --status-warning-border:rgba(251,191,36,0.28);

  --status-error:         #f87171;
  --status-error-bg:      rgba(248,113,113,0.14);
  --status-error-border:  rgba(248,113,113,0.28);

  --status-info:          #38bdf8;
  --status-info-bg:       rgba(56,189,248,0.14);
  --status-info-border:   rgba(56,189,248,0.28);

  --status-neutral:       #94a3b8;
  --status-neutral-bg:    rgba(148,163,184,0.14);
  --status-neutral-border:rgba(148,163,184,0.28);

  --status-purple:        #c4b5fd;
  --status-purple-bg:     rgba(196,181,253,0.14);
  --status-purple-border: rgba(196,181,253,0.28);

  /* Borders — discretas no soft UI (separadores sutis) */
  --border-subtle:  rgba(255,255,255,0.04);
  --border-default: rgba(255,255,255,0.06);
  --border-strong:  rgba(255,255,255,0.10);
  --border-brand:   rgba(34,211,238,0.40);

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:   'Inter', system-ui, sans-serif;
  --font-ui:     'Inter', system-ui, sans-serif;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extrabold:800;

  --lh-tight:  1.2;
  --lh-snug:   1.375;
  --lh-normal: 1.5;
  --lh-relaxed:1.625;

  /* ── Spacing ─────────────────────────────────────────────── */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;  --sp-4:  1rem;
  --sp-5:  1.25rem;  --sp-6:  1.5rem;   --sp-8:  2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;     --sp-16: 4rem;     --sp-20: 5rem;

  /* ── Border Radius — arredondado (soft UI) ───────────────── */
  --radius-sm:   10px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ── Sombras neumórficas (duplas) ────────────────────────── */
  /* Atalhos reutilizáveis */
  --neu-out-sm: 3px 3px 6px var(--sh-dark), -3px -3px 6px var(--sh-light);
  --neu-out-md: 5px 5px 10px var(--sh-dark), -5px -5px 10px var(--sh-light);
  --neu-out-lg: 8px 8px 16px var(--sh-dark), -8px -8px 16px var(--sh-light);
  --neu-in-sm:  inset 2px 2px 5px var(--sh-dark), inset -2px -2px 5px var(--sh-light);
  --neu-in-md:  inset 4px 4px 8px var(--sh-dark), inset -4px -4px 8px var(--sh-light);
  --neu-in-lg:  inset 6px 6px 12px var(--sh-dark), inset -6px -6px 12px var(--sh-light);

  /* Mapeamento dos antigos --shadow-* para soft UI */
  --shadow-sm: var(--neu-out-sm);
  --shadow-md: var(--neu-out-md);
  --shadow-lg: var(--neu-out-lg);
  --shadow-xl: 12px 12px 24px var(--sh-dark), -10px -10px 22px var(--sh-light);
  --shadow-brand: var(--neu-out-md), 0 0 14px var(--brand-primary-glow);
  --shadow-glow-primary:   0 0 18px var(--brand-primary-glow);
  --shadow-glow-secondary: 0 0 18px var(--brand-secondary-glow);

  /* ── Layout ──────────────────────────────────────────────── */
  --sidebar-width:           264px;
  --sidebar-collapsed-width: 80px;
  --header-height:           72px;
  --content-max-width:       1400px;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   150ms cubic-bezier(0.4,0,0.2,1);
  --transition-normal: 250ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   400ms cubic-bezier(0.4,0,0.2,1);
  --transition-bounce: 350ms cubic-bezier(0.34,1.56,0.64,1);

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-sidebar:  100;
  --z-header:   200;
  --z-dropdown: 300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── Global Reset ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-overlay) transparent;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--bg-base);
  line-height: var(--lh-normal);
  min-height: 100vh;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--brand-primary-dim); }

button { font-family: var(--font-sans); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font-sans); }

img { max-width: 100%; display: block; }

::selection {
  background: var(--brand-primary-glow);
  color: var(--text-primary);
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bg-base);
  border-radius: var(--radius-full);
  box-shadow: var(--neu-in-sm);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--bg-overlay); }

/* ─────────────────────────────────────────────────────────────
   TEMA CLARO (soft UI clássico)
   ───────────────────────────────────────────────────────────── */
body.light-theme {
  --neu-bg:        #e4ebf2;
  --sh-dark:       #ccd4e0;
  --sh-light:      #ffffff;

  /* Sombras mais suaves e difusas no tema claro
     (desfoque maior + sombra escura mais clara = relevo macio, sem "mancha") */
  --neu-out-sm: 2px 2px 6px var(--sh-dark), -2px -2px 6px var(--sh-light);
  --neu-out-md: 5px 5px 13px var(--sh-dark), -5px -5px 13px var(--sh-light);
  --neu-out-lg: 9px 9px 22px var(--sh-dark), -8px -8px 20px var(--sh-light);
  --neu-in-sm:  inset 2px 2px 5px var(--sh-dark), inset -2px -2px 5px var(--sh-light);
  --neu-in-md:  inset 3px 3px 8px var(--sh-dark), inset -3px -3px 8px var(--sh-light);
  --neu-in-lg:  inset 5px 5px 12px var(--sh-dark), inset -5px -5px 12px var(--sh-light);
  --shadow-xl:  13px 13px 30px var(--sh-dark), -11px -11px 26px var(--sh-light);

  --bg-base:       #e4ebf2;
  --bg-surface:    #e4ebf2;
  --bg-elevated:   #e9eff5;
  --bg-overlay:    #dde5ee;
  --bg-hover:      #eaf0f6;
  --bg-active:     #d7dfe9;

  --brand-primary:       #0ea5e9;
  --brand-primary-dim:   #0284c7;
  --brand-primary-glow:  rgba(14,165,233,0.22);
  --brand-secondary:     #8b5cf6;
  --brand-secondary-dim: #7c3aed;
  --brand-secondary-glow:rgba(139,92,246,0.22);
  --brand-gradient:   linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
  --brand-gradient-r: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);

  --text-primary:   #2b3a52;
  --text-secondary: #5d6b82;
  --text-tertiary:  #8693a8;
  --text-disabled:  #aab4c2;
  --text-inverse:   #ffffff;

  --status-success:       #10b981;
  --status-success-bg:    rgba(16,185,129,0.12);
  --status-success-border:rgba(16,185,129,0.26);
  --status-warning:       #f59e0b;
  --status-warning-bg:    rgba(245,158,11,0.12);
  --status-warning-border:rgba(245,158,11,0.26);
  --status-error:         #ef4444;
  --status-error-bg:      rgba(239,68,68,0.12);
  --status-error-border:  rgba(239,68,68,0.26);
  --status-info:          #0ea5e9;
  --status-info-bg:       rgba(14,165,233,0.12);
  --status-info-border:   rgba(14,165,233,0.26);
  --status-neutral:       #64748b;
  --status-neutral-bg:    rgba(100,116,139,0.12);
  --status-neutral-border:rgba(100,116,139,0.26);
  --status-purple:        #8b5cf6;
  --status-purple-bg:     rgba(139,92,246,0.12);
  --status-purple-border: rgba(139,92,246,0.26);

  --border-subtle:  rgba(0,0,0,0.04);
  --border-default: rgba(0,0,0,0.06);
  --border-strong:  rgba(0,0,0,0.10);
  --border-brand:   rgba(14,165,233,0.40);
}