/* ============================================================
   SYNCSTAQ: Design tokens — dark premium / laranja / branco
   ============================================================ */
:root{
  --bg: #F4F1EB;
  --bg-alt: #F4F1EB;
  --surface: #FFFFFF;
  --surface-2: #F4F1EB;
  --border: rgba(20,20,15,.08);
  --border-strong: rgba(20,20,15,.15);
  --text: #16160F;
  --text-dim: #5B5C52;
  --text-faint: #8C8D80;
  --accent-deep: #C24800;
  --accent: #FF5A00;
  --accent-soft: rgba(255,90,0,0.08);
  --accent-line: rgba(255,90,0,0.35);
  --accent-glow: rgba(255,90,0,0.10);
  --shadow: rgba(20,20,15,.1);
  --shadow-strong: rgba(20,20,15,.16);

  /* aliases do design system pedido (mesmos tokens, nomes alternativos) */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--text-dim);
  --color-accent: var(--accent);
  --color-border: var(--border);
  --color-offwhite: #F4F1EB;

  /* superfícies "vidro" usadas em cards/pills — trocam de tom conforme o fundo da seção */
  --glass-1: rgba(20,20,15,.025);
  --glass-2: rgba(20,20,15,.035);
  --glass-3: rgba(20,20,15,.045);
  --glass-border: rgba(20,20,15,.08);
  --glass-border-2: rgba(20,20,15,.1);
  --glass-border-strong: rgba(20,20,15,.15);
  --glass-border-strong-2: rgba(20,20,15,.2);

  /* gradiente dos títulos grandes (section-title--gradient) */
  --title-grad-a: #16160F;
  --title-grad-b: #55564C;

  --font-display: 'Switzer', 'Inter', sans-serif;
  --font-body: 'Switzer', 'Inter', sans-serif;
  --font-mono: 'Switzer', 'Inter', sans-serif;
  --font-logo: 'Poppins', sans-serif;
  --font-switzer: 'Switzer', 'Inter', sans-serif;

  /* medidos no CSS real da referência (hero) */
  --bg-outer: #2b2b2b;
  --ink: #000000;
  --muted: #828282;
  --muted-sm: #6b6b6b; /* versão mais escura do cinza pra texto pequeno — #828282 não passa em contraste abaixo de headline */
  --cta-ring: #545454;

  --container: 1200px;
  --gutter: clamp(16px, 6vw, 64px);

  --ease: cubic-bezier(.4,0,.2,1);
  --nav-h: 66px;

  --r-btn: 999px;
  --r-nav: 32px;
  --r-card: 16px;
}
/* container central cresce até 1520px em telas muito largas (>=1699px), igual à referência */
@media (min-width:1699px){
  :root{ --container: 1520px; }
}

/* ---------- global reset ---------- */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,select,textarea{ font-family:inherit; color:inherit; background:none; border:none; }
::selection{ background:var(--accent); color:#fff; }

section[id], #projetos{ scroll-margin-top:var(--nav-h); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--accent); color:#fff;
  padding:12px 20px; z-index:999; font-family:var(--font-mono); font-size:.85rem;
}
.skip-link:focus{ left:16px; top:16px; }

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