/* ===========================================================================
   Real Designs — design tokens
   Modern Brutalist Poster: canvas bone (off-white quente), âmbar vibrante
   como acento, Clash Display + Satoshi. Sombras: offsets sólidos. Borders
   pretos. Burnt-red preservado como --color-accent-urgency (uso pontual).
   =========================================================================== */

:root {
  /* ---- Backgrounds ---- */
  --color-bg-primary: #F5F1E7;   /* bone claro — off-white quente, levemente mais luminoso */
  --color-bg-secondary: #1E1E1E;
  --color-bg-muted: #ECE7D9;     /* bone profundo p/ surfaces alternadas */

  /* ---- Text ---- */
  --color-text-primary: #1E1E1E;
  --color-text-inverse: #F5F1E7;
  --color-text-muted: #5A5048;

  /* ---- Accents (uso estratégico) ---- */
  --color-accent-primary: #F8A348;      /* âmbar vibrante: CTAs, headlines de destaque, marquee */
  --color-accent-primary-dark: #C66416; /* amber escurecido: hover, scrollbar hover, text-on-cream com contraste */
  --color-accent-secondary: #F8A348;    /* alias do primary — mantido p/ compatibilidade */
  --color-accent-urgency:  #DB4A2B;     /* burnt red — reservado p/ badges de urgência ("5 vagas") */
  --color-accent-tertiary: #FF89A9;
  --color-accent-deep:     #61220F;
  --color-blob-warm:       #F8A348;
  --color-blob-pink:       #FF89A9;

  /* ---- Sistema ---- */
  --color-border: #1E1E1E;
  --color-border-subtle: #CFCBC2;
  --color-success: #3A8A3A;
  --color-error: #DB4A2B;

  /* ---- Tipografia ---- */
  --font-display: 'Clash Display', system-ui, -apple-system, sans-serif;
  --font-body:    'Satoshi', system-ui, -apple-system, sans-serif;

  /* ---- Espaçamento (8px scale) ---- */
  --space-unit: 8px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 80px;
  --space-8: 96px;
  --space-10: 128px;
  --space-12: 160px;

  /* ---- Radius ---- */
  --radius-none: 0;
  --radius-sharp: 2px;

  /* ---- Bordas ---- */
  --border-thin: 2px solid #1E1E1E;
  --border-thick: 3px solid #1E1E1E;
  --border-hair: 1px solid #CFCBC2;   /* subtle hairline divider — meta bars, table rows */

  /* ---- Sombras (offsets sólidos — sem blur) ---- */
  --shadow-hard: 4px 4px 0 #1E1E1E;
  --shadow-hard-lg: 8px 8px 0 #1E1E1E;
  --shadow-hard-magenta: 4px 4px 0 #DB4A2B;
  --shadow-hard-coral: 4px 4px 0 #F8A348;

  /* ---- Tipografia scale ---- */
  --font-hero: clamp(56px, 12vw, 180px);
  --font-display-lg: clamp(40px, 7vw, 96px);
  --font-display-md: clamp(32px, 5vw, 64px);
  --font-display-sm: clamp(24px, 3.5vw, 40px);
  --font-body-lg: clamp(18px, 1.5vw, 22px);
  --font-body-md: 16px;
  --font-body-sm: 14px;
  --font-caption: 12px;

  /* ---- Numerais gigantes (passos, valores) ---- */
  --font-numeral: clamp(80px, 14vw, 150px);

  /* ---- Layout ---- */
  /* Container fills nearly the full desktop width: caps at 1920px (covers most
     desktop monitors edge-to-edge) and uses a small fluid lateral gutter so the
     content meets the screen edges with breathing room, not big empty margins.
     Text-dense elements (.section-title 16ch, .section-lead 60ch, .faq 880px)
     self-constrain for readability so the wide container doesn't hurt scan. */
  --container-max: 1920px;
  --container-pad-x: clamp(20px, 3vw, 56px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-poster: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-reveal: 800ms;
  --duration-slow: 480ms;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-reveal: 0ms;
    --duration-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}