/* ============================================================
   Leilao Labs — Design Tokens (Fase 1 do redesign SaaS)
   Spec: docs/superpowers/specs/2026-05-28-saas-redesign-pack.md
   ============================================================ */

:root {
  /* ===== Surfaces ===== */
  --ll-bg:           #FAFAF7;   /* off-white quente, fundo da pagina */
  --ll-bg-warm:      #FAF8F2;   /* variante para detalhe (mais quente) */
  --ll-surface:      #FFFFFF;   /* cards, paineis */
  --ll-surface-2:    #F4F4F0;   /* sub-surface (stats, sub-cards) */
  --ll-surface-warm: #F6F5F0;   /* sub-surface no detalhe */

  /* ===== Ink / texto ===== */
  --ll-ink:      #0f172a;       /* texto principal (slate-950, casa com nav) */
  --ll-ink-2:    #3a4150;       /* texto secundario */
  --ll-muted:    #6b7280;       /* placeholder, labels */
  --ll-muted-2:  #9aa0ab;       /* hint, eyebrow */
  --ll-ink-warm: #14181f;       /* ink alternativo para detalhe */

  /* ===== Linhas / bordas ===== */
  --ll-line:    #eae9e2;
  --ll-line-2:  #e0ded5;

  /* ===== Acao / marca ===== */
  --ll-green:       #0F7A4D;    /* verde principal de acao */
  --ll-green-ink:   #0a4f33;    /* texto sobre verde-soft */
  --ll-green-soft:  #e7f2ec;    /* bg de pill/status verde */
  --ll-green-dot:   #34d399;    /* dot do sino, indicador positivo */

  /* ===== CTA herói "Quero ajuda" ===== */
  --ll-cta-help-from: #d9760e;
  --ll-cta-help-to:   #b65a0a;

  /* ===== Urgencia / vermelho ===== */
  --ll-red:          #c2261c;   /* contagem regressiva critica, encerrando */
  --ll-amber-ink:    #9a5a16;
  --ll-amber-soft:   #faf0db;

  /* ===== Sombras ===== */
  --ll-shadow-sm: 0 1px 2px rgba(10,10,10,0.04);
  --ll-shadow:    0 6px 24px -8px rgba(10,10,10,0.10),
                  0 2px 6px -2px rgba(10,10,10,0.05);
  --ll-shadow-lg: 0 18px 50px -22px rgba(20,24,31,.22);

  /* ===== Raios ===== */
  --ll-radius-sm: 6px;
  --ll-radius:    10px;
  --ll-radius-lg: 14px;
  --ll-radius-xl: 22px;

  /* ===== Tipografia ===== */
  --ll-font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ll-font-display: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ll-font-serif:   'Spectral', Georgia, 'Times New Roman', serif;
  --ll-font-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Monaco, monospace;
}

/* ===== Skip-to-content link (a11y/WCAG) ===== */
.ll-skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 9999;
  padding: 10px 16px;
  background: var(--ll-ink, #0f172a);
  color: #ffffff;
  font-family: var(--ll-font-sans, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
  transition: top 0.15s ease;
}
.ll-skip-link:focus,
.ll-skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--ll-green-dot, #34d399);
  outline-offset: -2px;
}

/* ===== Nav slate notification dot (ja referenciada no spec da Fase 1) ===== */
.notif-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--ll-green-dot);
  border: 2px solid #0f172a;
  pointer-events: none;
}