/* =============================================================================
   RoicomIA - Base + Componentes
   Camada 2 e 3. Depende de tokens/tokens.css - importe-o antes deste arquivo.
   Nenhum valor cru aqui: tudo referencia var(--rc-*).
   ========================================================================== */

@import url("../tokens/tokens.css");

/* -----------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--rc-bg);
  color: var(--rc-text);
  font-family: var(--rc-font-sans);
  font-size: var(--rc-text-base);
  line-height: var(--rc-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(a) { color: var(--rc-primary); text-underline-offset: 0.2em; }
:where(img, svg, video) { max-width: 100%; height: auto; display: block; }
:where(h1, h2, h3, h4, p, figure, blockquote) { margin: 0; }

/* Foco visivel e unico em todo o sistema. Nunca remova sem substituir. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--rc-focus-ring);
  border-radius: var(--rc-radius-sm);
}

::selection { background: var(--rc-purple-500); color: var(--rc-neutral-0); }

/* -----------------------------------------------------------------------------
   TIPOGRAFIA
   Regra da marca: o peso vem do grotesco, a emocao vem do Baskerville italico.
   Use .rc-em para a palavra-chave da frase - uma por titulo, nunca duas.
   -------------------------------------------------------------------------- */

.rc-display,
.rc-h1, .rc-h2, .rc-h3, .rc-h4 {
  font-family: var(--rc-font-sans);
  font-weight: var(--rc-weight-bold);
  letter-spacing: var(--rc-tracking-display);
  line-height: var(--rc-leading-tight);
  color: var(--rc-text);
  text-wrap: balance;
}

.rc-display { font-size: clamp(var(--rc-text-5xl), 6vw + 1rem, var(--rc-text-7xl)); }
.rc-h1 { font-size: clamp(var(--rc-text-4xl), 4vw + 1rem, var(--rc-text-6xl)); }
.rc-h2 { font-size: clamp(var(--rc-text-3xl), 2.5vw + 1rem, var(--rc-text-5xl)); }
.rc-h3 { font-size: var(--rc-text-2xl); letter-spacing: var(--rc-tracking-tight); }
.rc-h4 { font-size: var(--rc-text-xl); letter-spacing: var(--rc-tracking-tight); line-height: var(--rc-leading-snug); }

/* Baskerville e oficialmente a fonte primaria de decor/titulos (manual p.11).
   A variante sans acima reflete as composicoes digitais mistas da p.35. */
.rc-title-brand {
  font-family: var(--rc-font-display);
  font-style: italic;
  font-weight: var(--rc-weight-regular);
  letter-spacing: var(--rc-tracking-tight);
  line-height: var(--rc-leading-tight);
  text-wrap: balance;
}

/* A assinatura tipografica da marca. */
.rc-em {
  font-family: var(--rc-font-accent);
  font-style: italic;
  font-weight: var(--rc-weight-regular);
  letter-spacing: var(--rc-tracking-normal);
}

.rc-em--accent { color: var(--rc-accent); }

.rc-lead {
  font-size: var(--rc-text-lg);
  line-height: var(--rc-leading-relaxed);
  color: var(--rc-text-muted);
  max-width: 62ch;
  text-wrap: pretty;
}

.rc-body { font-size: var(--rc-text-base); max-width: 70ch; text-wrap: pretty; }
.rc-small { font-size: var(--rc-text-sm); color: var(--rc-text-muted); }

/* Rotulo caixa-alta espacado - o mesmo recurso que o manual usa em cada pagina. */
.rc-overline {
  font-family: var(--rc-font-sans);
  font-size: var(--rc-text-overline);
  font-weight: var(--rc-weight-medium);
  letter-spacing: var(--rc-tracking-overline);
  text-transform: uppercase;
  color: var(--rc-text-subtle);
}

/* Texto em gradiente. Fundo escuro apenas: no claro o verde some. */
.rc-gradient-text {
  background: var(--rc-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -----------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */

.rc-container {
  width: 100%;
  max-width: var(--rc-container);
  margin-inline: auto;
  padding-inline: var(--rc-space-6);
}

.rc-section { padding-block: clamp(var(--rc-space-16), 10vw, var(--rc-space-32)); }
.rc-hero {
  min-height: min(52rem, 100svh);
  display: grid;
  align-items: center;
  padding-block: clamp(var(--rc-space-20), 12vw, var(--rc-space-32));
  overflow: clip;
}
.rc-stack   { display: flex; flex-direction: column; gap: var(--rc-space-4); }
.rc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rc-space-3); }

.rc-grid {
  display: grid;
  gap: var(--rc-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

/* -----------------------------------------------------------------------------
   BOTOES
   -------------------------------------------------------------------------- */

.rc-btn {
  --_bg: transparent;
  --_fg: var(--rc-text);
  --_bd: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rc-space-2);
  padding: var(--rc-space-3) var(--rc-space-6);
  min-height: 2.75rem; /* alvo de toque 44px */

  font-family: var(--rc-font-sans);
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-weight-medium);
  letter-spacing: var(--rc-tracking-wide);
  line-height: 1;
  white-space: nowrap;

  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  border-radius: var(--rc-radius-full); /* pilula - forma padrao da marca */
  cursor: pointer;
  text-decoration: none;
  transition: background var(--rc-duration-fast) var(--rc-ease-standard),
              color var(--rc-duration-fast) var(--rc-ease-standard),
              border-color var(--rc-duration-fast) var(--rc-ease-standard),
              transform var(--rc-duration-fast) var(--rc-ease-standard);
}

.rc-btn:hover  { transform: translateY(-1px); }
.rc-btn:active { transform: translateY(0); }
.rc-btn[disabled], .rc-btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none;
}

.rc-btn--primary {
  --_bg: var(--rc-primary);
  --_fg: var(--rc-primary-contrast);
  --_bd: var(--rc-primary);
}
.rc-btn--primary:hover { --_bg: var(--rc-primary-hover); --_bd: var(--rc-primary-hover); }

/* Acento verde - so no tema escuro carrega o gesto "sinal ligado". */
.rc-btn--accent {
  --_bg: var(--rc-accent);
  --_fg: var(--rc-accent-contrast);
  --_bd: var(--rc-accent);
}

.rc-btn--gradient {
  background: var(--rc-gradient-brand);
  color: var(--rc-neutral-1000);
  border-color: transparent;
  font-weight: var(--rc-weight-bold);
}

.rc-btn--outline {
  --_fg: var(--rc-text);
  --_bd: var(--rc-border-strong);
}
.rc-btn--outline:hover { --_bd: var(--rc-text); }

.rc-btn--ghost { --_fg: var(--rc-text-muted); }
.rc-btn--ghost:hover { --_fg: var(--rc-text); --_bg: var(--rc-surface); }

.rc-btn--lg { padding: var(--rc-space-4) var(--rc-space-8); font-size: var(--rc-text-base); min-height: 3.25rem; }
.rc-btn--sm { padding: var(--rc-space-2) var(--rc-space-4); font-size: var(--rc-text-caption); min-height: 2.25rem; }

/* -----------------------------------------------------------------------------
   SUPERFICIES
   -------------------------------------------------------------------------- */

.rc-card {
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-xl);
  padding: var(--rc-space-6);
  box-shadow: var(--rc-shadow-card);
}

.rc-card--flat { box-shadow: none; }

/* Borda em gradiente - usar com moderacao, para o card em destaque. */
.rc-card--brand {
  position: relative;
  border-color: transparent;
  background:
    linear-gradient(var(--rc-surface), var(--rc-surface)) padding-box,
    var(--rc-gradient-brand) border-box;
  border: 1px solid transparent;
}

.rc-panel {
  background: var(--rc-bg-subtle);
  border-radius: var(--rc-radius-lg);
  padding: var(--rc-space-6);
}

.rc-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--rc-radius-xl);
  background: var(--rc-neutral-950);
}
.rc-media > :where(img, video) { width: 100%; height: 100%; object-fit: cover; }
.rc-media--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.72), transparent 68%);
  pointer-events: none;
}

.rc-divider { height: 1px; background: var(--rc-border); border: 0; margin-block: var(--rc-space-8); }

/* -----------------------------------------------------------------------------
   BADGE / CHIP
   -------------------------------------------------------------------------- */

.rc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  padding: var(--rc-space-1) var(--rc-space-3);
  border-radius: var(--rc-radius-full);
  font-size: var(--rc-text-overline);
  font-weight: var(--rc-weight-medium);
  letter-spacing: var(--rc-tracking-overline);
  text-transform: uppercase;
  border: 1px solid var(--rc-border);
  color: var(--rc-text-muted);
  background: transparent;
}

.rc-badge--success { color: var(--rc-success); border-color: color-mix(in srgb, var(--rc-success) 45%, transparent); }
.rc-badge--warning { color: var(--rc-warning); border-color: color-mix(in srgb, var(--rc-warning) 45%, transparent); }
.rc-badge--danger  { color: var(--rc-danger);  border-color: color-mix(in srgb, var(--rc-danger) 45%, transparent); }
.rc-badge--brand   { color: var(--rc-primary); border-color: color-mix(in srgb, var(--rc-primary) 55%, transparent); }

/* -----------------------------------------------------------------------------
   FORMULARIOS
   -------------------------------------------------------------------------- */

.rc-field { display: flex; flex-direction: column; gap: var(--rc-space-2); }

.rc-label {
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-weight-medium);
  color: var(--rc-text);
}

.rc-input, .rc-select, .rc-textarea {
  width: 100%;
  padding: var(--rc-space-3) var(--rc-space-4);
  min-height: 2.75rem;
  font-family: var(--rc-font-sans);
  font-size: var(--rc-text-base);
  color: var(--rc-text);
  background: var(--rc-bg-subtle);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-md);
  transition: border-color var(--rc-duration-fast) var(--rc-ease-standard);
}

.rc-input::placeholder, .rc-textarea::placeholder { color: var(--rc-text-subtle); }
.rc-input:hover, .rc-select:hover, .rc-textarea:hover { border-color: var(--rc-border-strong); }
.rc-textarea { min-height: 7rem; resize: vertical; }

.rc-input[aria-invalid="true"] { border-color: var(--rc-danger); }
.rc-help { font-size: var(--rc-text-caption); color: var(--rc-text-muted); }
.rc-error { font-size: var(--rc-text-caption); color: var(--rc-danger); }

/* -----------------------------------------------------------------------------
   LOGO
   -------------------------------------------------------------------------- */

/* Area de respiro obrigatoria: metade da altura do icone em todos os lados. */
.rc-logo { display: inline-block; padding: 0.5em; }
.rc-logo > svg, .rc-logo > img { display: block; height: 2.5rem; width: auto; }
.rc-logo--sm > svg, .rc-logo--sm > img { height: 1.75rem; } /* minimo digital: 24px de icone */
.rc-logo--lg > svg, .rc-logo--lg > img { height: 4rem; }

/* -----------------------------------------------------------------------------
   SUPERFICIES DE MARCA
   -------------------------------------------------------------------------- */

.rc-surface-aurora { background: var(--rc-gradient-aurora); color: var(--rc-neutral-0); }
.rc-surface-night  { background: var(--rc-gradient-night);  color: var(--rc-neutral-0); }
.rc-surface-brand  { background: var(--rc-gradient-brand);  color: var(--rc-neutral-1000); }

/* Halo atras de conteudo escuro - o "brilho" dos posts e OOH. */
.rc-halo { position: relative; isolation: isolate; }
.rc-halo::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: var(--rc-gradient-halo);
  opacity: 0.28;
  filter: blur(60px);
  pointer-events: none;
}

.rc-squircle { border-radius: var(--rc-radius-squircle); overflow: hidden; }

/* -----------------------------------------------------------------------------
   UTILITARIOS
   -------------------------------------------------------------------------- */

.rc-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}