/* ============================================================
   ONFIDE DESIGN TOKENS
   Fonte: identidade oficial do ecossistema (spot.onfide.com.br).
   Reaproveitado tal qual em qualquer plataforma ONFIDE — nunca duplicar.
============================================================ */
:root {
  --clr-borgonha-900: #1a0209;
  --clr-borgonha-800: #2a0110;
  --clr-borgonha-700: #3e0316;
  --clr-borgonha-600: #5c0522;
  --clr-borgonha-500: #7a082f;
  --clr-borgonha-400: #a30d42;
  --clr-borgonha-alpha15: rgba(62,3,22,0.15);
  --clr-borgonha-alpha30: rgba(62,3,22,0.30);
  --clr-borgonha-alpha88: rgba(62,3,22,0.88);

  --clr-navy-900: #001232;
  --clr-navy-800: #001a47;
  --clr-navy-700: #00286c;
  --clr-navy-600: #003a8c;
  --clr-navy-500: #0052b0;
  --clr-navy-alpha15: rgba(0,40,108,0.15);
  --clr-navy-alpha30: rgba(0,40,108,0.30);

  --clr-acento-600: #0062d6;
  --clr-acento-500: #1e7cff;
  --clr-acento-400: #4d96ff;
  --clr-acento-alpha12: rgba(30,124,255,0.12);
  --clr-acento-alpha25: rgba(30,124,255,0.25);

  --clr-branco: #ffffff;
  --clr-off-white: #f5f3ef;
  --clr-creme: #ede8e0;
  --clr-cinza-100: #c8c2b8;
  --clr-cinza-300: #9a9188;
  --clr-cinza-500: #7a7268;
  --clr-cinza-700: #3d3831;
  --clr-cinza-900: #1e1b18;

  --color-bg-dark: var(--clr-borgonha-900);
  --color-bg-surface: var(--clr-borgonha-800);
  --color-bg-card-dark: rgba(255,255,255,0.04);
  --color-bg-light: var(--clr-off-white);

  --color-text-on-dark: var(--clr-branco);
  --color-text-on-dark-muted: rgba(255,255,255,0.65);
  --color-text-on-dark-subtle: rgba(255,255,255,0.40);
  --color-text-on-light: var(--clr-cinza-700);
  --color-text-on-light-muted: var(--clr-cinza-500);

  --color-brand-primary: var(--clr-borgonha-700);
  --color-brand-secondary: var(--clr-navy-700);
  --color-brand-accent: var(--clr-acento-500);

  --color-border-dark: rgba(255,255,255,0.08);
  --color-border-medium: rgba(255,255,255,0.15);

  --font-display: 'Roboto Slab', Georgia, serif;
  --font-corpo: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-ui: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.015em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-caps: 0.12em;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px;

  --border-thin: 1px solid var(--color-border-dark);
  --border-medium: 1px solid var(--color-border-medium);

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.24), 0 2px 6px rgba(0,0,0,0.14);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.18);
  --shadow-borgonha-sm: 0 4px 16px rgba(62,3,22,0.35);
  --shadow-borgonha-md: 0 8px 32px rgba(62,3,22,0.45);
  --shadow-acento-sm: 0 4px 16px rgba(30,124,255,0.25);
  --shadow-acento-md: 0 8px 28px rgba(30,124,255,0.35);

  --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --transition-normal: 250ms cubic-bezier(0.4,0,0.2,1);
  --transition-spring: 350ms cubic-bezier(0.34,1.56,0.64,1);

  --gradient-hero: linear-gradient(160deg, var(--clr-borgonha-900) 0%, var(--clr-borgonha-800) 35%, var(--clr-borgonha-700) 65%, var(--clr-navy-900) 100%);
  --gradient-dark-overlay: linear-gradient(to bottom, transparent 0%, rgba(26,2,9,0.6) 60%, rgba(26,2,9,0.95) 100%);
  --gradient-card-dark: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  --gradient-accent-glow: radial-gradient(ellipse at center, rgba(30,124,255,0.15) 0%, transparent 70%);

  /* ----------------------------------------------------------
     Paleta "dourado sobre marrom escuro" — redesign da Biblioteca
     (referência: mockup aprovado pelo Marsan, jul/2026). Vive junto
     dos tokens acima em vez de substituí-los, pra não quebrar nada
     que ainda use --clr-acento-*/--gradient-hero em outro lugar.
  ---------------------------------------------------------- */
  --clr-dourado-100: #f5e6c8;
  --clr-dourado-300: #e8c874;
  --clr-dourado-400: #d4a843;
  --clr-dourado-500: #b8901f;
  --clr-dourado-600: #8f6f1a;
  --clr-dourado-alpha12: rgba(212,168,67,0.12);
  --clr-dourado-alpha25: rgba(212,168,67,0.25);

  --clr-marrom-950: #120b05;
  --clr-marrom-900: #1c130a;
  --clr-marrom-800: #2a1d10;
  --clr-marrom-700: #3d2a16;

  --gradient-hero-dourado: linear-gradient(160deg, var(--clr-marrom-950) 0%, var(--clr-marrom-900) 55%, var(--clr-marrom-800) 100%);
  --shadow-dourado-md: 0 8px 28px rgba(212,168,67,0.25);
}

/* Reset base compartilhado */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Botões — componente atômico reutilizável entre plataformas ONFIDE */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: var(--tracking-wide);
  padding: 0.9rem 2rem;
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--clr-acento-500);
  color: var(--clr-branco);
  box-shadow: var(--shadow-acento-sm);
}
.btn-primary:hover { background: var(--clr-acento-600); box-shadow: var(--shadow-acento-md); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--color-text-on-dark);
  border: var(--border-medium);
}
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); }