/* ═══════════════════════════════════════════════════════════
   Próvision — Design Tokens  (Light Theme + Navy + Gold)
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Syne:wght@500;600;700;800&display=swap');

:root {
  /* ── Brand ── */
  --navy:           #1B2540;
  --navy-light:     #2D3A54;
  --navy-muted:     rgba(27,37,64,0.08);
  --gold:           #C49A3C;
  --gold-hover:     #A8822E;
  --gold-bg:        rgba(196,154,60,0.10);

  /* ── Backgrounds ── */
  --bg-app:         #F4F6F9;
  --bg-sidebar:     #1B2540;
  --bg-surface:     #FFFFFF;
  --bg-surface-2:   #F8FAFC;
  --bg-hover:       rgba(27,37,64,0.04);

  /* ── Borders (more visible) ── */
  --border:         #D1D9E0;
  --border-strong:  #B0BAC8;
  --border-hover:   #9DAABB;
  --border-active:  #C49A3C;

  /* ── Text ── */
  --text-primary:   #1B2540;
  --text-secondary: #4A5568;
  --text-muted:     #94A3B8;
  --text-label:     #64748B;
  --text-on-dark:   #E8EDF4;
  --text-on-dark-2: rgba(232,237,244,0.65);

  /* ── Sidebar items (on dark/navy background) ── */
  --sidebar-item:       rgba(255,255,255,0.72);
  --sidebar-item-hover: rgba(255,255,255,0.92);
  --sidebar-item-bg-hover: rgba(255,255,255,0.06);
  --sidebar-item-active-bg: rgba(196,154,60,0.14);
  --sidebar-item-active-border: #C49A3C;
  --sidebar-item-active-text: #C49A3C;

  /* ── Status ── */
  --green:          #10B981;
  --green-bg:       rgba(16,185,129,0.08);
  --blue:           #3B82F6;
  --blue-bg:        rgba(59,130,246,0.08);
  --amber:          #F59E0B;
  --amber-bg:       rgba(245,158,11,0.08);
  --red:            #EF4444;
  --red-bg:         rgba(239,68,68,0.08);

  /* ── Typography ── */
  --font-body:      'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-brand:     'DM Serif Display', Georgia, serif;

  /* ── Layout ── */
  --sidebar-width:     240px;
  --sidebar-collapsed: 64px;
  --topbar-height:     52px;

  /* ── Radius ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── Shadows (light theme) ── */
  --shadow-xs: 0 1px 2px rgba(27,37,64,0.06);
  --shadow-sm: 0 1px 4px rgba(27,37,64,0.08), 0 2px 8px rgba(27,37,64,0.04);
  --shadow-md: 0 4px 16px rgba(27,37,64,0.10), 0 1px 4px rgba(27,37,64,0.06);
  --shadow-lg: 0 8px 32px rgba(27,37,64,0.12), 0 2px 8px rgba(27,37,64,0.08);
  --shadow-gold: 0 4px 16px rgba(196,154,60,0.22);

  /* ── Transitions ── */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.2s ease;
  --transition-slow:   all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ═══════════════════════════════════════════════════════════
     Sprint 1 (2026-04) — Design system foundation
     Tokens adicionados para suportar css/modules/provision-*.css.
     NÃO substituir tokens existentes — apenas ampliar.
     ═══════════════════════════════════════════════════════════ */

  /* ── Spacing scale (4-based) ── */
  --space-2xs:  2px;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* ── Typography scale ── */
  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  14px;   /* default body */
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

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

  /* ── Raw durations and easings (use when --transition-* shorthand não serve) ── */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    200ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;

  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-emphasized:cubic-bezier(0.2, 0, 0, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Focus ring (acessibilidade) ── */
  --focus-ring:        0 0 0 3px rgba(196,154,60,0.35);
  --focus-ring-danger: 0 0 0 3px rgba(239,68,68,0.30);

  /* ── Z-index scale ── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;

  /* ════════════════════════════════════════════════════════
     Paleta lp-kit-guilherme (dark premium) — 2026-04
     Não remover --navy/--gold (legacy ainda em uso).
     ════════════════════════════════════════════════════════ */
  --color-base:           #0B1120;
  --color-surface:        #111827;
  --color-surface-raised: #1E293B;
  --color-surface-glass:  rgba(30, 41, 59, 0.6);

  --color-blue:           #3B82F6;
  --color-blue-light:     #60A5FA;
  --color-blue-deep:      #1D4ED8;

  --color-amber:          #E8A847;
  --color-amber-light:    #F0C66E;
  --color-amber-muted:    #C9944A;

  --color-txt:            #F1F5F9;
  --color-txt-secondary:  #94A3B8;
  --color-txt-muted:      #64748B;

  --color-success:        #34D399;

  --font-heading-lp: 'Outfit', system-ui, sans-serif;
  --font-body-lp:    'Inter', system-ui, sans-serif;
  --font-mono-lp:    'JetBrains Mono', ui-monospace, monospace;

  --glass-nav-bg:    rgba(11, 17, 32, 0.72);
  --glass-card-bg:   rgba(30, 41, 59, 0.50);
  --glass-soft-bg:   rgba(30, 41, 59, 0.32);
  --glass-hairline:  rgba(148, 163, 184, 0.07);

  --glow-blue-rest:   0 0 24px rgba(59, 130, 246, 0.18);
  --glow-blue-hover:  0 0 38px rgba(59, 130, 246, 0.32);
  --glow-blue-card:   0 0 40px rgba(59, 130, 246, 0.10);
  --glow-amber-rest:  0 0 24px rgba(232, 168, 71, 0.20);
  --glow-amber-hover: 0 0 38px rgba(232, 168, 71, 0.36);

  /* Aliases legacy (cobertura para deleção do :root duplicado em app-shell.css) */
  --bg-primary:          var(--bg-app);
  --bg-surface-hover:    var(--bg-surface-2);
  --bg-input:            var(--bg-surface);
  --accent-purple:       var(--navy);
  --accent-purple-hover: var(--navy-light);
  --accent-purple-light: var(--gold);
  --accent-purple-bg:    var(--gold-bg);
  --accent-blue:         var(--blue);
  --accent-blue-bg:      var(--blue-bg);
  --accent-green:        var(--green);
  --accent-green-bg:     var(--green-bg);
  --accent-amber:        var(--amber);
  --accent-amber-bg:     var(--amber-bg);
  --accent-red:          var(--red);
  --accent-red-bg:       var(--red-bg);
  --font-heading:        var(--font-brand);
  --shadow-purple:       var(--shadow-gold);
}

/* ── Tooltip Component ─────────────────────────────────────── */
.tooltip-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: help;
  color: var(--text-muted);
  background: transparent;
  margin-left: 6px;
  vertical-align: middle;
  position: relative;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
  user-select: none;
}
.tooltip-q:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.tooltip-q::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  padding: 7px 11px;
  border-radius: var(--radius-md);
  white-space: normal;
  width: max-content;
  max-width: 220px;
  text-align: center;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  box-shadow: var(--shadow-md);
}
.tooltip-q:hover::after { opacity: 1; }

/* ── Workspace autenticado (app-shell) — tema dark premium (lp-kit-aligned) ── */
html.provision-app--dark {
  --ws-bg-body:         var(--color-base);
  --ws-bg-content-a:    var(--color-surface);
  --ws-bg-content-b:    var(--color-surface-raised);
  --ws-chrome-bg:       var(--color-base);
  --ws-sheet-radius:    20px;
  --ws-sheet-gutter-x:  12px;
  --ws-sheet-gutter-b:  16px;
  /* Sem offset X negativo: evita “lâmina” vertical na junção sidebar | folha (dashboard/simulador). */
  --ws-sheet-shadow:
    0 12px 40px rgba(0, 0, 0, 0.40),
    0 4px 16px rgba(0, 0, 0, 0.22);
  /* Separadores do chrome (sidebar/topbar): mais suaves que --border do tema claro */
  --ws-chrome-hairline: var(--glass-hairline);
  --ws-topbar-bg:       var(--glass-nav-bg);
  --ws-topbar-border:   rgba(148, 163, 184, 0.10);
  --ws-glass-border:    rgba(148, 163, 184, 0.14);
  --ws-glass-panel:     var(--glass-card-bg);
  --ws-text-muted:      var(--color-txt-secondary);
  --ws-text-secondary:  #CBD5E1;
  --font-display-ws:    var(--font-heading-lp);
  --text-on-dark:       var(--color-txt);
  --text-on-dark-2:     rgba(241, 245, 249, 0.72);
}