/* ═══════════════════════════════════════════════════════════════
   HANS WERNER — DESIGN SYSTEM
   Direção: Dark · Dourado · Brutalista-editorial
   Marca-mãe dourada (#C9A84C). Ciano = acento tech pontual (IA).
   Fonte única de verdade dos tokens. Importado por inicio.html e index.html.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── COR · Fundo (ink) ──────────────────────────────────── */
  --color-bg-primary:    #0A0A0C;   /* fundo principal              */
  --color-bg-secondary:  #111115;   /* seção alternada              */
  --color-bg-elevated:   #1A1A20;   /* cards / superfícies          */
  --color-bg-elevated-2: #242430;   /* superfícies sobre cards      */

  /* ── COR · Texto (bone) ─────────────────────────────────── */
  --color-text-primary:   #F8F5F0;
  --color-text-secondary: rgba(248, 245, 240, 0.78);
  --color-text-hint:      rgba(248, 245, 240, 0.45);
  --color-text-faint:     rgba(248, 245, 240, 0.22);

  /* ── COR · Marca · Dourado ──────────────────────────────── */
  --color-brand:        #C9A84C;
  --color-brand-light:  #E8C97A;
  --color-brand-dark:   #A8842E;            /* ~10% mais escura — fills de hover */
  --color-brand-pale:   rgba(201, 168, 76, 0.12);
  --color-brand-glow:   rgba(201, 168, 76, 0.06);

  /* ── COR · Acento tech (universo IA — uso pontual) ──────── */
  --color-tech:       #29D4E0;
  --color-tech-pale:  rgba(41, 212, 224, 0.10);

  /* ── COR · Linhas ───────────────────────────────────────── */
  --color-border:        rgba(248, 245, 240, 0.12);
  --color-border-strong: rgba(248, 245, 240, 0.22);

  /* ── COR · Semânticas ───────────────────────────────────── */
  --color-success: #28C840;
  --color-warning: #E8C97A;
  --color-danger:  #D4453B;

  /* ── TIPOGRAFIA · Famílias ──────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Space Grotesk', monospace;

  /* ── TIPOGRAFIA · Escala fluida ─────────────────────────── */
  --text-display:  clamp(40px, 6vw, 96px);
  --text-headline: clamp(28px, 4vw, 64px);
  --text-title:    clamp(22px, 2.6vw, 34px);
  --text-subhead:  clamp(18px, 2vw, 24px);
  --text-lead:     clamp(17px, 1.5vw, 20px);
  --text-body:     16px;
  --text-small:    14px;
  --text-label:    11px;

  /* ── TIPOGRAFIA · Pesos ─────────────────────────────────── */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  /* ── TIPOGRAFIA · Ritmo ─────────────────────────────────── */
  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body:    1.65;
  --ls-display: -0.03em;
  --ls-heading: -0.015em;
  --ls-label:   0.16em;
  --ls-mono:    0.02em;

  /* ── ESPAÇO · Escala base 8 ─────────────────────────────── */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-6:  24px;  --s-8:  32px;  --s-12: 48px;  --s-16: 64px;
  --s-20: 80px;  --s-24: 96px;  --s-32: 128px;

  /* ── ESPAÇO · Semânticos ────────────────────────────────── */
  --section-y:   clamp(64px, 8vw, 160px);
  --container:   1280px;
  --container-x: clamp(20px, 5vw, 80px);
  --card-pad:    clamp(20px, 3vw, 40px);
  --gap:         clamp(16px, 2.5vw, 32px);

  /* ── FORMA · Raios (brutalista: padrão reto) ────────────── */
  --r-sharp: 0;
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    16px;
  --r-pill:  999px;

  /* ── FORMA · Sombras (dark + glow dourado) ──────────────── */
  --sh-sm:    0 1px 3px rgba(0,0,0,.4),   0 1px 2px rgba(0,0,0,.3);
  --sh-md:    0 8px 24px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.3);
  --sh-lg:    0 24px 60px rgba(0,0,0,.45), 0 8px 16px rgba(0,0,0,.3);
  --sh-brand: 0 8px 32px rgba(201,168,76,.20);

  /* ── MOVIMENTO ──────────────────────────────────────────── */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 150ms;
  --d-mid:  300ms;
  --d-slow: 600ms;
}

/* ═══════════════════════════════════════════════════════════════
   BASE — reset + acabamentos nível Awards (herdados por todas as páginas)
   ═══════════════════════════════════════════════════════════════ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }

/* Seleção de texto na cor da marca */
::selection { background: var(--color-brand); color: var(--color-bg-primary); }

/* Foco visível custom (não o outline azul do browser) */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
  border-radius: var(--r-xs);
}

/* Scrollbar custom (Chrome/Edge) */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--color-bg-secondary); }
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-brand-dark); }

/* Respeito a quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Util · revelar no scroll (consumido pelo IntersectionObserver) ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--d-slow) var(--ease-out),
              transform var(--d-slow) var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}