/* ============================================================
   TODOS PROTEGIDOS — DESIGN TOKENS
   Sistema SGA · Dexer Group Tech
   Marca: azuis royal do site (#1540c8/#0a2e9e) + teal de ação #00c9a7 (site) + branco.
   Filosofia: "Precise Fintech" — suíço/confiante, densidade de backoffice,
   light + dark mode. Consumo: CSS variables + preset Tailwind.
   ============================================================ */

:root {
  /* ---------- PALETA BRUTA (referência — não usar direto na UI) ---------- */
  /* Índigo (mantém nomes -navy-/-blue- por compat. com componentes) */
  --tp-navy-950: #0a1442;
  --tp-navy-900: #0e1f66;
  --tp-navy-800: #132f95;  /* ÍNDIGO da marca */
  --tp-navy-700: #21409e;

  --tp-blue-700: #0e2472;
  --tp-blue-600: #1c34a6;
  --tp-blue-500: #2540be;
  --tp-blue-400: #4f6ae0;  /* índigo bright (acento no escuro) */
  --tp-blue-300: #9fb0f0;
  --tp-blue-100: #e8ebfb;

  /* Teal (assinatura da marca — valores do site oficial) */
  --tp-teal-700: #007a6a;
  --tp-teal-600: #00b897;
  --tp-teal-500: #00c9a7;  /* TEAL do site — cor de ação */
  --tp-teal-400: #4dd9c0;  /* teal-light do site */
  --tp-teal-300: #8ae8d8;
  --tp-teal-100: #e8faf7;  /* teal-bg do site */

  /* Neutros frios (leve undertone índigo) */
  --tp-slate-700: #2b3b4e;
  --tp-slate-600: #47586b;
  --tp-slate-500: #62758a;
  --tp-slate-400: #9aa8b6;
  --tp-slate-300: #d0dae6;
  --tp-slate-200: #e4eaf1;
  --tp-slate-100: #eef3f8;
  --tp-slate-50:  #f6f9fc;
  --tp-white:     #ffffff;

  --tp-green-500: #2f9e6f;
  --tp-amber-500: #e0a23a;
  --tp-red-500:   #d64550;

  /* ============================================================
     TOKENS SEMÂNTICOS — LIGHT MODE
     ============================================================ */

  /* Superfícies */
  --color-bg-canvas:      #eef3f8;
  --color-bg-primary:     #ffffff;
  --color-bg-secondary:   #f6f9fc;
  --color-bg-tertiary:    #eef3f8;
  --color-bg-inverse:     #0a1442;   /* índigo profundo */
  --color-bg-hover:       #f1f5fa;
  --color-bg-selected:    #e8ebfb;   /* tint índigo */

  /* Sidebar — índigo fixo nos DOIS temas */
  --color-sidebar-bg:          #0a1345;
  --color-sidebar-border:      rgba(255, 255, 255, 0.07);
  --color-sidebar-item:        rgba(255, 255, 255, 0.72);
  --color-sidebar-item-hover:  rgba(255, 255, 255, 0.07);
  --color-sidebar-label:       rgba(255, 255, 255, 0.36);

  /* Texto (índigo-tintado como o site: --text-dark #0a1f6b) */
  --color-text-primary:   #0a1f6b;
  --color-text-body:      #2b3b5e;
  --color-text-secondary: #62758a;
  --color-text-tertiary:  #9aa8b6;
  --color-text-inverse:   #f6f9fc;
  --color-text-link:      #1540c8;
  --color-text-link-hover:#0a2e9e;   /* hover de link por cor: escurece no claro */
  --color-text-on-accent: #ffffff;

  /* Bordas */
  --color-border-primary:   #e4eaf1;
  --color-border-secondary: #eef3f8;
  --color-border-strong:    #d0dae6;
  --color-border-focus:     #1540c8;

  /* Azul — links, foco, info (azuis royal do site) */
  --color-accent-primary:        #1540c8;  /* blue-main do site */
  --color-accent-primary-hover:  #0e3bc4;
  --color-accent-primary-active: #0a2e9e;  /* blue-dark do site */
  --color-accent-primary-subtle: #e8f4ff;  /* azul-bebê do site */
  --color-accent-secondary:      #0a1f6b;
  --color-accent-secondary-hover:#0a2e9e;

  /* Destaque/AÇÃO — TEAL (valores do site oficial) */
  --color-accent-teal:        #00c9a7;
  --color-accent-teal-hover:  #00b897;  /* gradiente/hover do site */
  --color-accent-teal-strong: #00a98c;  /* texto pequeno em fundo claro */
  --color-accent-teal-subtle: #e8faf7;  /* teal-bg do site */
  --color-text-on-teal:       #0a1442;  /* quase-preto índigo sobre teal (legibilidade sem "azul sobre verde") */

  /* Status */
  --color-status-success:        #2f9e6f;
  --color-status-success-subtle: #e7f6ef;
  --color-status-warning:        #c9821f;
  --color-status-warning-subtle: #fbf3e3;
  --color-status-error:          #d64550;
  --color-status-error-subtle:   #fbe9ea;
  --color-status-info:           #2540be;
  --color-status-info-subtle:    #e8ebfb;

  /* Status sobre superfície inversa (--color-bg-inverse) — ex.: toasts.
     Espelham a paleta de status do tema oposto (a superfície inverte, o status acompanha). */
  --color-status-success-on-inverse: #45b587;
  --color-status-warning-on-inverse: #e6b256;
  --color-status-error-on-inverse:   #ec6069;
  --color-status-info-on-inverse:    #4f6ae0;

  /* Financeiro */
  --color-finance-positive: #2f9e6f;
  --color-finance-negative: #d64550;
  --color-finance-neutral:  #62758a;

  /* Overlay */
  --color-surface-overlay: rgba(10, 20, 64, 0.44);

  /* ---------- Sombras (tinta índigo) ---------- */
  --shadow-xs:   0 1px 1px rgba(10, 20, 64, 0.05);
  --shadow-sm:   0 1px 2px rgba(10, 20, 64, 0.06), 0 1px 3px rgba(10, 20, 64, 0.05);
  --shadow-md:   0 4px 12px rgba(10, 20, 64, 0.09), 0 2px 4px rgba(10, 20, 64, 0.05);
  --shadow-lg:   0 12px 32px rgba(10, 20, 64, 0.13), 0 4px 8px rgba(10, 20, 64, 0.06);
  --shadow-xl:   0 24px 56px rgba(10, 20, 64, 0.17);
  --shadow-focus: 0 0 0 3px rgba(19, 47, 149, 0.22);
  --shadow-focus-error: 0 0 0 3px rgba(214, 69, 80, 0.22);
  --shadow-glow-teal: 0 4px 18px rgba(0, 201, 167, 0.32);  /* glow de assinatura da ação teal (.btn-teal) */

  /* ============================================================
     ESCALAS (independentes de tema)
     ============================================================ */

  /* Espaçamento (base 4px) */
  --space-0:0; --space-px:1px;
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;

  /* Tipografia */
  --font-family-display: 'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-family-body:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --font-size-2xs:0.6875rem; /* 11px — micro-caps mono: tags de marca, rodapés técnicos, metadados */
  --font-size-xs:0.75rem; --font-size-sm:0.8125rem; --font-size-base:0.875rem;
  --font-size-md:1rem; --font-size-lg:1.125rem; --font-size-xl:1.25rem;
  --font-size-2xl:1.5rem; --font-size-3xl:1.875rem; --font-size-4xl:2.375rem;

  --font-weight-normal:400; --font-weight-medium:500; --font-weight-semibold:600;
  --font-weight-bold:700; --font-weight-black:800;

  --line-height-tight:1.2; --line-height-snug:1.35; --line-height-normal:1.5; --line-height-relaxed:1.65;

  --letter-spacing-tighter:-0.02em; --letter-spacing-tight:-0.01em; --letter-spacing-normal:0;
  --letter-spacing-wide:0.04em; --letter-spacing-wider:0.12em;

  /* Layout */
  --max-width-content:75ch; --max-width-wide:1200px; --max-width-page:1440px;
  --sidebar-width:264px; --topbar-height:60px;

  --border-radius-xs:4px; --border-radius-sm:6px; --border-radius-md:10px;
  --border-radius-lg:14px; --border-radius-xl:20px; --border-radius-full:999px;
  --border-width-thin:1px; --border-width-medium:1.5px; --border-width-thick:2px;

  /* Componentes */
  --control-height-sm:32px; --control-height-md:40px; --control-height-lg:48px;
  --control-radius-lg:12px; /* raio de controle lg ≈ altura ÷ 4 (48px → 12px); controles md (40px) usam --border-radius-md (10px) */
  --control-padding-x:var(--space-4); --focus-ring:var(--shadow-focus);

  /* Movimento */
  --duration-instant:50ms; --duration-fast:150ms; --duration-normal:250ms;
  --duration-slow:400ms; --duration-slower:600ms;
  --easing-default:cubic-bezier(0.4,0,0.2,1); --easing-in:cubic-bezier(0.4,0,1,1);
  --easing-out:cubic-bezier(0,0,0.2,1); --easing-bounce:cubic-bezier(0.34,1.56,0.64,1);

  /* Z-index */
  --z-base:0; --z-sticky:100; --z-dropdown:200; --z-overlay:300; --z-modal:400; --z-toast:500;

  /* Breakpoints (referência JS) */
  --breakpoint-sm:375px; --breakpoint-md:768px; --breakpoint-lg:1024px;
  --breakpoint-xl:1280px; --breakpoint-2xl:1536px;
}

/* ============================================================
   DARK MODE — índigo profundo, não invertido
   ============================================================ */

[data-theme="dark"] {
  --color-bg-canvas:      #0a1230;
  --color-bg-primary:     #0f1c47;
  --color-bg-secondary:   #132550;
  --color-bg-tertiary:    #1a2e63;
  --color-bg-inverse:     #f6f9fc;
  --color-bg-hover:       #16265a;
  --color-bg-selected:    #1e3576;

  --color-sidebar-bg:     #080f2c;

  --color-text-primary:   #e9edfa;
  --color-text-body:      #ccd6ea;
  --color-text-secondary: #9aa8c4;
  --color-text-tertiary:  #6b7a9a;
  --color-text-inverse:   #0a1442;
  --color-text-link:      #8aa0f2;
  --color-text-link-hover:#b8c6ff;   /* hover de link por cor: clareia no escuro */
  --color-text-on-accent: #ffffff;

  --color-border-primary:   #22335c;
  --color-border-secondary: #1a2a50;
  --color-border-strong:    #2f4372;
  --color-border-focus:     #4f6ae0;

  --color-accent-primary:        #4f6ae0;
  --color-accent-primary-hover:  #6e86ec;
  --color-accent-primary-active: #3552c4;
  --color-accent-primary-subtle: rgba(79, 106, 224, 0.16);
  --color-accent-secondary:      #ccd6ea;
  --color-accent-secondary-hover:#e9edfa;

  --color-accent-teal:        #00c9a7;
  --color-accent-teal-strong: #4dd9c0;
  --color-accent-teal-subtle: rgba(0,201,167, 0.16);

  --color-status-success:        #45b587;
  --color-status-success-subtle: rgba(69, 181, 135, 0.15);
  --color-status-warning:        #e6b256;
  --color-status-warning-subtle: rgba(230, 178, 86, 0.15);
  --color-status-error:          #ec6069;
  --color-status-error-subtle:   rgba(236, 96, 105, 0.15);
  --color-status-info:           #4f6ae0;
  --color-status-info-subtle:    rgba(79, 106, 224, 0.15);

  /* no dark, a superfície inversa é clara → status do tema claro */
  --color-status-success-on-inverse: #2f9e6f;
  --color-status-warning-on-inverse: #c9821f;
  --color-status-error-on-inverse:   #d64550;
  --color-status-info-on-inverse:    #2540be;

  --color-finance-positive: #45b587;
  --color-finance-negative: #ec6069;
  --color-finance-neutral:  #9aa8c4;

  --color-surface-overlay: rgba(0, 0, 0, 0.6);

  --shadow-xs:   0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-xl:   0 24px 56px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 3px rgba(79, 106, 224, 0.35);
  --shadow-focus-error: 0 0 0 3px rgba(236, 96, 105, 0.3);
  --shadow-glow-teal: 0 4px 18px rgba(0, 201, 167, 0.32);  /* teal é o mesmo nos dois temas */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-canvas:#0a1230; --color-bg-primary:#0f1c47; --color-bg-secondary:#132550;
    --color-bg-tertiary:#1a2e63; --color-bg-inverse:#f6f9fc; --color-bg-hover:#16265a;
    --color-bg-selected:#1e3576; --color-sidebar-bg:#080f2c;
    --color-text-primary:#e9edfa; --color-text-body:#ccd6ea; --color-text-secondary:#9aa8c4;
    --color-text-tertiary:#6b7a9a; --color-text-inverse:#0a1442; --color-text-link:#8aa0f2; --color-text-link-hover:#b8c6ff;
    --color-border-primary:#22335c; --color-border-secondary:#1a2a50; --color-border-strong:#2f4372;
    --color-border-focus:#4f6ae0;
    --color-accent-primary:#4f6ae0; --color-accent-primary-hover:#6e86ec;
    --color-accent-primary-active:#3552c4; --color-accent-primary-subtle:rgba(79,106,224,0.16);
    --color-accent-secondary:#ccd6ea;
    --color-accent-teal:#00c9a7; --color-accent-teal-strong:#4dd9c0; --color-accent-teal-subtle:rgba(0,201,167,0.16);
    --color-status-success:#45b587; --color-status-success-subtle:rgba(69,181,135,0.15);
    --color-status-warning:#e6b256; --color-status-warning-subtle:rgba(230,178,86,0.15);
    --color-status-error:#ec6069; --color-status-error-subtle:rgba(236,96,105,0.15);
    --color-status-info:#4f6ae0; --color-status-info-subtle:rgba(79,106,224,0.15);
    --color-status-success-on-inverse:#2f9e6f; --color-status-warning-on-inverse:#c9821f;
    --color-status-error-on-inverse:#d64550; --color-status-info-on-inverse:#2540be;
    --color-finance-positive:#45b587; --color-finance-negative:#ec6069;
    --color-surface-overlay:rgba(0,0,0,0.6);
    --shadow-sm:0 1px 2px rgba(0,0,0,0.35),0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:0 4px 12px rgba(0,0,0,0.4),0 2px 4px rgba(0,0,0,0.3);
    --shadow-lg:0 12px 32px rgba(0,0,0,0.5),0 4px 8px rgba(0,0,0,0.35);
    --shadow-focus:0 0 0 3px rgba(79,106,224,0.35);
    --shadow-glow-teal:0 4px 18px rgba(0,201,167,0.32);
  }
}