/* =========================================================
   ALLBRVE VirtualOffice — Design Tokens (v2 "Mint")
   Referência visual: Greyola Fintech CRM (case aprovado).
   Paleta monocromática + verde menta · Plus Jakarta Sans.
   Tema ESCURO por padrão; CLARO via [data-theme="light"] / .theme-light.
   Mantém TODOS os nomes de variáveis usados pelo app (2 gerações de tokens).
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --radius: 1rem;
  --r-card: 22px; --r-sub: 16px; --r-pill: 999px;

  /* ── Escala de espaçamento (REGRA: use sempre estes; nada de valor solto) ── */
  --gap: 16px;        /* espaço PADRÃO entre todos os blocos/cards */
  --gap-sm: 10px;     /* espaços pequenos (dentro de listas/linhas) */
  --gap-lg: 24px;     /* separação de seção / abaixo do título da página */
  --pad-card: 20px;   /* padding interno padrão dos cards */
  --pad-page: 26px;   /* padding lateral da página */

  /* ── Superfícies (ESCURO base) ── */
  --gemini-bg:        #0A0A0B;
  --gemini-surface:   #141416;
  --gemini-surface-2: #1C1C1F;
  --gemini-border:    rgba(255,255,255,.08);
  --gemini-text:      #FAFAFA;
  --gemini-text-dim:  #9A9AA0;

  /* ── Gradientes (agora em verde menta) ── */
  --gradient-aurora:   linear-gradient(90deg, #34D26A 0%, #78FC90 50%, #BFFFD0 100%);
  --gradient-composer: linear-gradient(135deg, #34D26A, #BFFFD0);
  --gradient-cta:      linear-gradient(90deg, rgba(52,210,106,.85), rgba(120,252,144,.85));
  --aurora:            linear-gradient(90deg, #34D26A 0%, #78FC90 50%, #BFFFD0 100%);

  /* ── Sombras ── */
  --shadow-gemini: 0 24px 60px -20px rgba(0,0,0,.7);
  --shadow-glass:  0 4px 20px -4px rgba(120,252,144,.25), inset 0 1px 0 rgba(255,255,255,.06);
  --shadow:        0 1px 2px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.45);

  /* ── Tema principal (compat camada shadcn) ── */
  --background:           #0E0E10;
  --foreground:           #FAFAFA;
  --card:                 #161618;
  --card-foreground:      #FAFAFA;
  --secondary:            #1F1F22;
  --secondary-foreground: #FAFAFA;
  --muted:                #1F1F22;
  --muted-foreground:     #9A9AA0;
  --border:               rgba(255,255,255,.08);
  --border-2:             rgba(255,255,255,.14);

  /* ── Navegação ── */
  --nav:            #141416;
  --nav-foreground: #FAFAFA;

  /* ── Brand = verde menta ── */
  --brand:            #78FC90;
  --brand-foreground: #06300F;
  --brand-strong:     #34D26A;

  /* ── Semânticas ── */
  --success:                #78FC90;
  --success-foreground:     #06300F;
  --success-soft:           rgba(120,252,144,.16);
  --warning:                #F0A623;
  --warning-foreground:     #2A1B00;
  --danger:                 #E2483D;
  --danger-soft:            rgba(226,72,61,.18);
  --danger-soft-foreground: #FF8A7E;
  --danger-fg:              #FF8A7E;

  /* ── Convenção "v2" usada por muitas telas (compat) ── */
  --bg:        #0A0A0B;
  --surface:   #141416;
  --surface2:  #1C1C1F;
  --canvas:    #161618;
  --card2:     #1C1C1F;
  --text:      #FAFAFA;
  --fg:        #FAFAFA;
  --ink:       #FAFAFA;
  --muted-fg:  #9A9AA0;
  --dim:       #6E6E76;
  --line:      rgba(255,255,255,.08);
  --border2:   rgba(255,255,255,.14);
  --accent:    #78FC90;
  --green:     #34D26A;
  --wa:        #25D366;
  --mono:      'Plus Jakarta Sans', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Cores por canal (padrão /teste) ── */
  --c-shopify: #34D26A;  /* verde */
  --c-day1:    #FAFAFA;  /* DAY = preto no claro / branco no escuro */
  --c-day2:    #A78BFA;  /* roxo */
  --c-loja:    #F0A623;  /* âmbar */
  --c-bonif:   #E879B6;  /* rosa */
  --c-whats:   #25D366;  /* verde whats */
  --c-outros:  #4A4A4E;  /* cinza */
}

/* ====================== TEMA CLARO ====================== */
:root[data-theme="light"], .theme-light {
  --gemini-bg:        #F1F1F2;
  --gemini-surface:   #FFFFFF;
  --gemini-surface-2: #F5F5F6;
  --gemini-border:    rgba(17,17,16,.08);
  --gemini-text:      #111110;
  --gemini-text-dim:  #6E6E73;

  --shadow-gemini: 0 1px 2px rgba(17,17,16,.05), 0 12px 30px rgba(17,17,16,.06);
  --shadow-glass:  0 4px 16px -6px rgba(52,210,106,.30), inset 0 1px 0 rgba(255,255,255,.6);
  --shadow:        0 1px 2px rgba(17,17,16,.04), 0 8px 24px rgba(17,17,16,.06);

  --background:           #FFFFFF;
  --foreground:           #111110;
  --card:                 #FFFFFF;
  --card-foreground:      #111110;
  --secondary:            #F2F2F3;
  --secondary-foreground: #111110;
  --muted:                #F2F2F3;
  --muted-foreground:     #6E6E73;
  --border:               rgba(17,17,16,.08);
  --border-2:             rgba(17,17,16,.14);

  --nav:            #FFFFFF;
  --nav-foreground: #111110;

  --brand:            #16A34A;
  --brand-foreground: #FFFFFF;
  --brand-strong:     #15803D;

  --success:                #16A34A;
  --success-foreground:     #FFFFFF;
  --success-soft:           #DCFCE7;
  --danger:                 #E2483D;
  --danger-soft:            #FEE3E3;
  --danger-soft-foreground: #C2362C;
  --danger-fg:              #C2362C;

  --bg:        #F1F1F2;
  --surface:   #FFFFFF;
  --surface2:  #F5F5F6;
  --canvas:    #FFFFFF;
  --card2:     #F5F5F6;
  --text:      #111110;
  --fg:        #111110;
  --ink:       #111110;
  --muted-fg:  #6E6E73;
  --dim:       #A0A0A6;
  --line:      rgba(17,17,16,.08);
  --border2:   rgba(17,17,16,.14);
  --accent:    #16A34A;
  --green:     #16A34A;

  /* canais — tema claro */
  --c-shopify: #34D26A;
  --c-day1:    #111110;  /* DAY preto no claro */
  --c-day2:    #A78BFA;
  --c-loja:    #F0A623;
  --c-bonif:   #E879B6;
  --c-whats:   #25D366;
  --c-outros:  #C8C8CC;
}

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

html, body {
  background-color: var(--gemini-bg);
  color: var(--gemini-text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -0.011em;
  min-height: 100vh;
  transition: background-color .3s ease, color .3s ease;
}

/* ── Tipografia ── */
h1, .h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
h2, .h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
h3, .h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; }

.text-muted { color: var(--gemini-text-dim); font-size: 0.75rem; }
.text-kpi   { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; }

/* ── Aurora text helper (agora verde) ── */
.text-aurora {
  background: var(--gradient-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Status dots ── */
.status-dot { width: 6px; height: 6px; border-radius: 9999px; display: inline-block; flex-shrink: 0; }
.status-dot.ok   { background: #34D26A; }
.status-dot.warn { background: #F0A623; }
.status-dot.err  { background: #E2483D; }

@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }

/* ── Scrollbar global ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gemini-border); border-radius: 9999px; }