/* Design tokens do LumeOS.
   Paleta e escala derivadas da referência visual (consultoria mid-market):
   azuis corporativos + acentos ciano/teal, dark/light com persistência. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Paleta base */
  --imperial-blue: #00296b;
  --french-blue:   #003f88;
  --steel-azure:   #00509d;
  --cyan-accent:   #38bdf8;
  --teal-accent:   #14b8a6;

  --slate-dark:    #0f172a;
  --slate-medium:  #1e293b;
  --slate-light:   #334155;
  --soft-white:    #f8fafc;
  --cool-gray:     #94a3b8;

  /* Tokens semânticos (tema escuro = padrão) */
  --bg:            var(--slate-dark);
  --bg-secondary:  #111827;
  --surface:       rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.07);
  --surface-solid: #162033;

  --text:          var(--soft-white);
  --text-muted:    var(--cool-gray);
  --text-light:    #cbd5e1;
  --text-inverse:  #0f172a;

  --accent:           var(--cyan-accent);
  --accent-hover:     #67e8f9;
  --accent-secondary: var(--teal-accent);
  /* Texto sobre botão primário (gradiente accent). No escuro: branco lê melhor. */
  --btn-primary-text: #ffffff;

  --border:       rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.04);

  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #38bdf8;

  /* Sombras */
  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.35);

  /* Motion */
  --transition-fast:   0.2s ease;
  --transition-medium: 0.4s cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --sidebar-width: 250px;
  --topbar-height: 72px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

[data-theme="light"] {
  --bg:            #f1f5f9;
  --bg-secondary:  #ffffff;
  --surface:       rgba(15, 23, 42, 0.03);
  --surface-hover: rgba(15, 23, 42, 0.06);
  --surface-solid: #ffffff;

  --text:          #0f172a;
  --text-muted:    #475569;
  --text-light:    #64748b;
  --text-inverse:  #ffffff;

  --accent:           #0ea5e9;
  --accent-hover:     #0284c7;
  --accent-secondary: #14b8a6;
  /* No claro: texto escuro lê bem sobre o accent claro. */
  --btn-primary-text: #04222e;

  --border:       rgba(15, 23, 42, 0.10);
  --border-light: rgba(15, 23, 42, 0.05);

  --shadow-sm: 0 4px 10px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.16);
}