/* ============================================================
   SOJI · Design Tokens
   Fundação visual: header escuro + workspace claro (premium).
   Fonte única de verdade para cor, tipografia e espaçamento.
   Etapa 1 — App Shell.
   ============================================================ */

:root {
  /* ---- Marca ---- */
  --gold:        #c9a227;   /* dourado — acento primário */
  --gold-light:  #dbb84a;   /* dourado claro (sobre escuro) */
  --gold-ink:    #9a7d1f;   /* dourado escuro (texto sobre claro) */
  --teal:        #2bbcb4;   /* teal — acento secundário */
  --teal-ink:    #14827c;   /* teal escuro (texto sobre claro) */

  /* ---- Header / superfícies escuras ---- */
  --navy:        #1b2a3a;
  --navy-mid:    #24354a;
  --navy-deep:   #14202c;
  --on-navy:     #e8edf2;   /* texto sobre escuro */
  --on-navy-mut: #93a6ba;   /* texto secundário sobre escuro */
  --navy-border: rgba(255,255,255,.09);

  /* ---- Workspace / superfícies claras ---- */
  --bg:          #f4f6f9;   /* fundo do workspace */
  --surface:     #ffffff;   /* cards, painéis */
  --surface-2:   #fbfcfd;   /* sidebar / superfícies sutis */
  --ink:         #1b2a3a;   /* texto principal (mesma família do navy → coesão) */
  --ink-soft:    #3d4f63;
  --muted:       #64748b;   /* texto secundário */
  --line:        #e5e9ef;   /* bordas */
  --line-soft:   #eef1f5;

  /* ---- Estados ---- */
  --ok:          #1f9d57;
  --warn:        #e08a1e;
  --danger:      #d1493f;
  --ok-bg:       #eafaf1;
  --warn-bg:     #fdf4e6;
  --danger-bg:   #fdeceb;

  /* ---- Planos ---- */
  --bronze:      #b06d2e;
  --prata:       #7b8a99;
  --ouro:        #c9a227;

  /* ---- Tipografia ---- */
  --f-display: 'Merriweather', Georgia, serif;   /* autoridade */
  --f-body:    'Inter', system-ui, sans-serif;   /* leitura */
  --f-mono:    'JetBrains Mono', ui-monospace, monospace; /* dados/rótulos */

  /* Escala de tipo */
  --t-xs:   .72rem;
  --t-sm:   .82rem;
  --t-base: .92rem;
  --t-md:   1.05rem;
  --t-lg:   1.28rem;
  --t-xl:   1.7rem;

  /* ---- Espaçamento (base 4px) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* ---- Raio / sombra ---- */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(27,42,58,.06), 0 1px 3px rgba(27,42,58,.05);
  --shadow-md: 0 4px 14px rgba(27,42,58,.08);
  --shadow-lg: 0 12px 32px rgba(27,42,58,.12);

  /* ---- Layout ---- */
  --header-h: 58px;
  --sidebar-w: 232px;
}