/* RRLima — Design tokens
   Identidade "Sinal" · v1 · setembro 2026
   Tema escuro é o padrão; .theme-light inverte.
   Nenhum valor de cor deve ser escrito fora deste arquivo. */

:root {
  /* ---- Cor: marca ---- */
  --rr-green: #00e28a;
  --rr-green-ink: #04120c;      /* texto sobre verde */
  --rr-green-deep: #00b96f;     /* verde para fundo claro */
  --rr-green-quiet: #1f6b4d;    /* barras laterais do símbolo */
  --rr-green-text-light: #0a5c3c; /* verde legível sobre branco */
  --rr-ink: #07100c;

  /* ---- Cor: semântica (tema escuro, padrão) ---- */
  --rr-bg: #07100c;
  --rr-surface: #0b1712;
  --rr-surface-2: #132e23;
  --rr-border: #16261e;
  --rr-border-strong: #1f6b4d;
  --rr-text: #eef7f2;
  --rr-text-muted: #9db3a8;
  --rr-text-quiet: #6f887d;
  --rr-accent: #00e28a;
  --rr-accent-hover: #6cf3bd;
  --rr-accent-ink: #04120c;
  --rr-focus: #00e28a;

  /* ---- Estado ---- */
  --rr-ok: #00e28a;
  --rr-warn: #e2a03f;
  --rr-danger: #e06a5f;

  /* ---- Tipografia ---- */
  --rr-font-display: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  --rr-font-body: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --rr-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --rr-text-display: clamp(3rem, 6.5vw, 5.5rem);
  --rr-text-h1: clamp(2.25rem, 4.4vw, 4rem);
  --rr-text-h2: clamp(1.75rem, 3vw, 2.75rem);
  --rr-text-h3: clamp(1.3rem, 1.9vw, 1.875rem);
  --rr-text-lead: clamp(1.125rem, 1.4vw, 1.375rem);
  --rr-text-body: 1.0625rem;
  --rr-text-small: 0.875rem;
  --rr-text-label: 0.75rem;

  --rr-leading-tight: 1.05;
  --rr-leading-snug: 1.2;
  --rr-leading-normal: 1.6;
  --rr-tracking-label: 0.2em;
  --rr-tracking-display: -0.01em;

  /* ---- Espaço (base 4px) ---- */
  --rr-space-1: 0.25rem;
  --rr-space-2: 0.5rem;
  --rr-space-3: 0.75rem;
  --rr-space-4: 1rem;
  --rr-space-5: 1.5rem;
  --rr-space-6: 2rem;
  --rr-space-7: 3rem;
  --rr-space-8: 4rem;
  --rr-space-9: 6rem;
  --rr-space-10: 8rem;

  --rr-section-y: clamp(4rem, 9vw, 8rem);
  --rr-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --rr-container: 78rem;
  --rr-measure: 38rem;   /* largura máxima de parágrafo */

  /* ---- Forma ---- */
  --rr-radius-0: 0px;
  --rr-radius-1: 2px;
  --rr-radius-pill: 999px;  /* só em selos de status */
  --rr-border-w: 1px;
  --rr-border-w-strong: 2px;

  /* ---- Elevação (usar borda antes de sombra) ---- */
  --rr-shadow-1: 0 1px 2px rgba(4, 18, 12, 0.4);
  --rr-shadow-2: 0 12px 32px rgba(4, 18, 12, 0.55);

  /* ---- Movimento (nível 2) ---- */
  --rr-dur-fast: 160ms;
  --rr-dur: 240ms;
  --rr-dur-slow: 400ms;
  --rr-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rr-stagger: 60ms;
  --rr-pulse: 1.6s;

  /* ---- Camadas ---- */
  --rr-z-header: 100;
  --rr-z-menu: 200;
  --rr-z-modal: 300;

  /* ---- Papéis de cor derivados ----
     Existem porque o tema claro não pode simplesmente inverter:
     verde sobre branco não passa em contraste de texto. */
  --rr-btn-bg: var(--rr-accent);          /* botão principal */
  --rr-btn-ink: var(--rr-accent-ink);
  --rr-btn-bg-hover: var(--rr-accent-hover);
  --rr-mark-side: var(--rr-green-quiet);  /* barras laterais do símbolo */
  --rr-mark-mid: var(--rr-green);         /* barra central */
  --rr-cta-bg: var(--rr-green);           /* faixa de chamada final */
  --rr-cta-ink: #04120c;
  --rr-cta-ink-muted: #0a4a31;
  --rr-header-bg: rgba(7, 16, 12, 0.82);  /* header com desfoque ao rolar */
}

.theme-light {
  --rr-bg: #f3f7f5;
  --rr-surface: #ffffff;
  --rr-surface-2: #e9efec;
  --rr-border: #dde7e1;
  --rr-border-strong: #00b96f;
  --rr-text: #07100c;
  --rr-text-muted: #4a5c53;
  --rr-text-quiet: #6b7d74;
  --rr-accent: #0a5c3c;
  --rr-accent-hover: #00b96f;
  --rr-accent-ink: #ffffff;
  --rr-focus: #00b96f;
  --rr-ok: #00b96f;
  --rr-shadow-1: 0 1px 2px rgba(7, 16, 12, 0.08);
  --rr-shadow-2: 0 12px 32px rgba(7, 16, 12, 0.12);

  /* No claro o botão principal é preto: verde sobre branco não dá contraste. */
  --rr-btn-bg: #07100c;
  --rr-btn-ink: #eef7f2;
  --rr-btn-bg-hover: #132e23;
  --rr-mark-side: #0a2a1d;
  --rr-mark-mid: #00b96f;
  --rr-cta-bg: #00b96f;
  /* O verde claro do tema claro é mais luminoso: o texto de apoio sobre ele
     precisa escurecer, senão fica em 3,97:1 — abaixo do mínimo de 4,5:1. */
  --rr-cta-ink-muted: #052a1e;
  --rr-header-bg: rgba(243, 247, 245, 0.85);
}

/* ---- Reset mínimo ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--rr-bg);
  color: var(--rr-text);
  font-family: var(--rr-font-body);
  font-size: var(--rr-text-body);
  line-height: var(--rr-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a {
  color: var(--rr-accent);
  text-decoration: none;
  transition: color var(--rr-dur-fast) var(--rr-ease);
}
a:hover { color: var(--rr-accent-hover); }

:focus-visible {
  outline: 2px solid var(--rr-focus);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: var(--rr-font-display);
  font-weight: 700;
  line-height: var(--rr-leading-snug);
  letter-spacing: var(--rr-tracking-display);
  margin: 0;
}

/* ---- Animações da marca ---- */
@keyframes rr-pulse {
  0%, 100% { transform: scaleY(0.38); opacity: 0.45; }
  50%      { transform: scaleY(1);    opacity: 1; }
}
@keyframes rr-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}