/* ============================================================
 * Viralizer Design System v2 aplicado ao painel useSend.
 *
 * O useSend resolve TODA cor via hsl(var(--token)) com os mesmos
 * nomes shadcn do Viralizer, entao redefinir os tokens reveste o
 * app inteiro sem forkar e sem rebuild da imagem.
 *
 * Os tokens do useSend vivem dentro de @layer base. Esta folha e
 * carregada SEM layer, e estilo sem camada vence estilo em camada
 * na cascata, entao estas regras ganham sem !important.
 * ============================================================ */

/* ===== FONTES (mesmos woff2 self-hosted do Viralizer) ===== */
@font-face { font-family: "Manrope"; src: url("/__vlz/fonts/manrope-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/__vlz/fonts/manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/__vlz/fonts/manrope-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/__vlz/fonts/manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/__vlz/fonts/manrope-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/__vlz/fonts/manrope-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "InterVlz"; src: url("/__vlz/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "InterVlz"; src: url("/__vlz/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "InterVlz"; src: url("/__vlz/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "InterVlz"; src: url("/__vlz/fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrainsMonoVlz"; src: url("/__vlz/fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrainsMonoVlz"; src: url("/__vlz/fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --font-sans: Manrope, InterVlz, ui-sans-serif, system-ui, sans-serif;
  --font-mono: JetBrainsMonoVlz, ui-monospace, SFMono-Regular, Menlo, monospace;

  /* escala coral da marca, pra uso direto */
  --vlz-coral-500: #ff5e5b;
  --vlz-coral-800: #993837;
  --gradient-brand: linear-gradient(135deg, #ff5e5b 0%, #993837 100%);
}

/* ===== LIGHT ===== */
:root, .light {
  --background: 0 0% 100%;
  --foreground: 0 0% 7%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 7%;
  --primary: 1 100% 68%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 7%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 38%;
  --accent: 2 100% 97%;
  --accent-foreground: 0 0% 7%;
  --destructive: 0 66% 47%;
  --destructive-foreground: 0 0% 98%;
  --success: 123 40% 38%;
  --success-foreground: 0 0% 98%;
  --warning: 27 92% 48%;
  --warning-foreground: 0 0% 98%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 1 100% 68%;
  --radius: 0.625rem;

  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 0 0% 7%;
  --sidebar-primary: 1 100% 68%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 2 100% 97%;
  --sidebar-accent-foreground: 0 0% 7%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 1 100% 68%;

  /* status: neutros SEM tinta, conforme o DS do Viralizer */
  --green: 123 40% 38%;
  --red: 0 66% 47%;
  --blue: 205 70% 45%;
  --purple: 267 60% 55%;
  --yellow: 27 92% 48%;
  --gray: 0 0% 38%;
  --primary-light: 1 100% 80%;

  /* graficos: rampa coral + neutros, em vez do arco-iris padrao */
  --chart-1: 1 100% 68%;
  --chart-2: 1 71% 58%;
  --chart-3: 1 45% 41%;
  --chart-4: 0 0% 55%;
  --chart-5: 0 0% 35%;
}

/* ===== DARK (o painel roda aqui) ===== */
.dark {
  --background: 0 0% 7%;              /* #121212 graphite */
  --foreground: 0 0% 93%;
  --card: 0 0% 10%;                   /* #1A1A1A */
  --card-foreground: 0 0% 93%;
  --popover: 0 0% 12%;                /* #1F1F1F */
  --popover-foreground: 0 0% 93%;
  --primary: 1 100% 68%;              /* coral pleno */
  --primary-foreground: 0 0% 7%;
  --secondary: 0 0% 15%;
  --secondary-foreground: 0 0% 93%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 64%;
  --accent: 1 25% 15%;                /* wash coral escuro */
  --accent-foreground: 0 0% 93%;
  --destructive: 0 62% 52%;
  --destructive-foreground: 0 0% 98%;
  --success: 123 40% 45%;
  --success-foreground: 0 0% 98%;
  --warning: 27 92% 55%;
  --warning-foreground: 0 0% 7%;
  --border: 0 0% 16%;                 /* #292929 */
  --input: 0 0% 16%;
  --ring: 1 100% 68%;

  --sidebar-background: 0 0% 10%;
  --sidebar-foreground: 0 0% 93%;
  --sidebar-primary: 1 100% 68%;
  --sidebar-primary-foreground: 0 0% 7%;
  --sidebar-accent: 1 25% 15%;
  --sidebar-accent-foreground: 0 0% 93%;
  --sidebar-border: 0 0% 16%;
  --sidebar-ring: 1 100% 68%;

  --green: 123 40% 45%;
  --red: 0 62% 52%;
  --blue: 205 70% 60%;
  --purple: 267 60% 68%;
  --yellow: 27 92% 55%;
  --gray: 0 0% 64%;
  --primary-light: 1 100% 78%;

  --chart-1: 1 100% 68%;
  --chart-2: 1 71% 58%;
  --chart-3: 1 45% 45%;
  --chart-4: 0 0% 64%;
  --chart-5: 0 0% 42%;
}

/* ===== LOGO: troca o squircle do useSend pelo reduzido do Viralizer =====
   logo-reduzido-dark.svg = marca BRANCA, e a variante pra fundo escuro. */
/* Amarrado no SRC, nao no alt: o alt e reescrito pelo proxy, entao um
   seletor por alt se quebra sozinho a cada renomeacao. */
img[src*="logo-squircle"],
img[alt="useSend"],
img[alt="Mail Viralizer"] {
  content: url("/__vlz/img/logo-reduzido-dark.svg");
  border-radius: 0;
}

/* ===== ACABAMENTO ===== */
body { font-family: var(--font-sans); }
code, pre, kbd, samp { font-family: var(--font-mono); }