/* ═══════════════════════════════════════════════════════════
   MEET — Ficheiro de Configuração de Marca
   Para nova instalação: edita APENAS este ficheiro.
   Não toques em main.css, meet.css ou meet.js.
   ═══════════════════════════════════════════════════════════ */

/* 1. ÍCONES — troca o URL para mudar biblioteca ou estilo
   Estilos disponíveis em cdn-uicons.flaticon.com:
   uicons-thin-chubby / uicons-regular-rounded / uicons-bold-rounded  */
@import url('https://cdn-uicons.flaticon.com/4.0.0/uicons-thin-chubby/css/uicons-thin-chubby.css');

/* 2. FONTE — troca por outra Google Font se necessário */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  /* ── COR PRINCIPAL ───────────────────────────────────── */
  --brand-primary:       #C32152;
  --brand-primary-10:    rgba(195, 33, 82, 0.10);
  --brand-primary-20:    rgba(195, 33, 82, 0.20);
  --brand-primary-hover: #a01a43;

  /* ── SUPERFÍCIES ─────────────────────────────────────── */
  --brand-bg:       #f0f0f3;
  --brand-surface:  #ffffff;
  --brand-surface2: #f5f5f8;
  --brand-border:   #e2e2e6;

  /* ── TEXTO ───────────────────────────────────────────── */
  --brand-text:  #111111;
  --brand-muted: #6b6b6b;

  /* ── TIPOGRAFIA ──────────────────────────────────────── */
  --brand-font: 'Quicksand', 'Segoe UI', Arial, sans-serif;

  /* ── FORMA ───────────────────────────────────────────── */
  --brand-radius:    10px;
  --brand-radius-sm: 7px;

  /* ── LOGO ────────────────────────────────────────────── */
  /* Coloca o logo em ./media/logo.svg (ou .png)
     e define as dimensões abaixo.
     O logo é usado em #logoname via CSS content/background. */
  --brand-logo-url:    url('./media/logo.svg');
  --brand-logo-height: 28px;

  /* ── NOME DA APLICAÇÃO (aparece no título do separador) ─ */
  /* (editar também no <title> e metas do room.html)         */

  /* ══════════════════════════════════════════════════════
     Mapeamento para variáveis internas do vdo.ninja.
     Não é necessário editar abaixo desta linha.
     ══════════════════════════════════════════════════════ */
  --brand-accent:        var(--brand-primary);
  --brand-accent-soft:   var(--brand-primary-10);
  --brand-line:          var(--brand-border);

  --background-color:       var(--brand-surface);
  --dark-background-color:  var(--brand-surface);
  --container-color:        var(--brand-surface2);
  --button-color:           var(--brand-surface2);
  --video-rounded:          var(--brand-radius);
  --video-border:           1px;
  --video-border-color:     var(--brand-border);
  --video-holder-color:     var(--brand-surface);
  --button-radius:          var(--brand-radius-sm);
  --myvideo-background:     var(--brand-surface);

  --a-link:         var(--brand-primary);
  --a-visited:      var(--brand-primary);
  --a-hover:        var(--brand-primary-hover);
  --a-focus:        var(--brand-primary-hover);
  --a-active:       var(--brand-primary-hover);
  --a-dark-link:    var(--brand-primary);
  --a-dark-visited: var(--brand-primary);
  --a-dark-hover:   var(--brand-primary-hover);
  --a-darker-link:  var(--brand-primary);
  --a-lighter-link: var(--brand-primary);
}