/* ==========================================================================
   Brickops — Design Tokens
   Importe este arquivo e use as variáveis. Não hardcode hex no código.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400;500;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* --- Cores base da marca --- */
  --bk-grafite: #1B1D21;
  --bk-tinta:   #0E0F12;
  --bk-brasa:   #E5683A;
  --bk-nevoa:   #EEF0F2;
  --bk-aco:     #6B7682;

  /* Variações de apoio (derivadas) */
  --bk-grafite-2: #232629;   /* superfície elevada no dark */
  --bk-brasa-700: #C9542B;   /* hover do acento */
  --bk-linha:     rgba(238,240,242,.10); /* bordas no dark */
  --bk-linha-dark:rgba(14,15,18,.12);    /* bordas no light */

  /* --- Tipografia --- */
  --bk-font-display: 'Chivo', system-ui, sans-serif;       /* títulos / logo */
  --bk-font-text:    'IBM Plex Sans', system-ui, sans-serif;/* corpo / UI */
  --bk-font-mono:    'IBM Plex Mono', ui-monospace, monospace; /* técnico */

  /* Raios e sombras */
  --bk-radius: 12px;
  --bk-radius-lg: 16px;
}

/* ==========================================================================
   Aliases SEMÂNTICOS — use estes nos componentes.
   Troque de tema mudando só este bloco.
   ========================================================================== */

/* SITE INSTITUCIONAL — agora LIGHT, espelhando a paleta do modo claro do sistema
   (bg névoa, cards brancos, tinta grafite, acento brasa). O grafite escuro
   aparece só como contraste (faixa de CTA e rodapé), igual à sidebar do app. */
.theme-site{
  --bg:        #EEF0F2;   /* nevoa (mesmo bg do app claro) */
  --surface:   #FFFFFF;   /* card branco */
  --surface-2: #E9ECF1;   /* superfície de apoio (inputs, gradientes) */
  --text:      #14161A;   /* tinta grafite */
  --text-muted:#5A626C;
  --accent:    var(--bk-brasa);      /* brasa #E5683A */
  --accent-hover: var(--bk-brasa-700);
  --secondary: #8A929C;   /* rótulos/legendas */
  --border:    #E3E6EA;   /* linha clara (mesma do app) */
  /* superfícies escuras de contraste (faixa CTA / rodapé) */
  --ink:       #14161A;
  --graphite:  #1B1D21;
  --graphite-2:#14161A;
}

/* SISTEMA / APP — light-first (melhor pra dados) */
.theme-app{
  --bg:        var(--bk-nevoa);
  --surface:   #FFFFFF;
  --surface-2: #F3F4F6;
  --text:      var(--bk-tinta);
  --text-muted:#5A6168;
  --accent:    var(--bk-brasa);
  --accent-hover: var(--bk-brasa-700);
  --secondary: var(--bk-aco);
  --border:    var(--bk-linha-dark);
  /* topbar do app continua escura: use .topbar { background: var(--bk-grafite) } */
}

/* ==========================================================================
   Base sugerida
   ========================================================================== */
body{ background:var(--bg); color:var(--text); font-family:var(--bk-font-text); }
h1,h2,h3,.display{ font-family:var(--bk-font-display); font-weight:800; letter-spacing:-.02em; }
.mono,code,.eyebrow{ font-family:var(--bk-font-mono); }

.btn-primary{ background:var(--accent); color:var(--bk-nevoa); border:0; border-radius:8px; }
.btn-primary:hover{ background:var(--accent-hover); }

/* Logotipo: "Brick" herda --text, "ops" recebe o acento */
.wordmark{ font-family:var(--bk-font-display); font-weight:900; letter-spacing:-.03em; }
.wordmark .ops{ color:var(--accent); }