/* =========================================================
   MPROJETOS — DESIGN TOKENS
   Baseado nas Etapas 8, 9, 10 e 11 do projeto
   ========================================================= */

:root {
  /* ---- Cor (Etapa 10) ---- */
  --color-bg-primary: #0A0A0B;
  --color-bg-secondary: #161618;
  --color-surface: #232326;
  --color-surface-2: #2B2B2F;
  --color-text-primary: #F2F2F0;
  --color-text-secondary: #A8A8AD;
  --color-text-tertiary: #5C5C61;
  --color-accent: #D4A72C;
  --color-accent-soft: rgba(212, 167, 44, 0.16);
  --color-border: rgba(242, 242, 240, 0.1);
  --color-border-strong: rgba(242, 242, 240, 0.22);
  --color-error: #B85C4A;

  /* ---- Tipografia (Etapa 9) ---- */
  --font-display: 'General Sans', 'Inter', -apple-system, sans-serif;
  --font-body: 'General Sans', 'Inter', -apple-system, sans-serif;

  --fs-display-xl: clamp(2.5rem, 7vw + 1rem, 6.5rem);
  --fs-display-l: clamp(2rem, 5vw + 0.5rem, 4rem);
  --fs-display-m: clamp(1.5rem, 2.6vw + 0.5rem, 2.5rem);
  --fs-body-lg: clamp(1.125rem, 0.6vw + 1rem, 1.5rem);
  --fs-body: clamp(0.9375rem, 0.2vw + 0.85rem, 1.0625rem);
  --fs-micro: clamp(0.75rem, 0.1vw + 0.72rem, 0.8125rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-relaxed: 1.6;

  --ls-tight: -0.02em;
  --ls-normal: 0em;
  --ls-wide: 0.04em;

  /* ---- Espaçamento (Etapa 11) — base 8px ---- */
  --space-1: 0.5rem;   /* 8px  */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 6rem;     /* 96px */
  --space-8: 8rem;     /* 128px */
  --space-9: 12rem;    /* 192px */
  --space-10: 16rem;   /* 256px */

  --section-pad-x: var(--space-3);
  --section-pad-y: var(--space-8);

  /* ---- Movimento (Etapa 13) ---- */
  --ease-signature: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);

  --duration-micro: 250ms;
  --duration-component: 350ms;
  --duration-reveal: 700ms;
  --duration-section: 1000ms;
  --duration-hero: 1200ms;

  /* ---- Layout ---- */
  --max-width: 1400px;
  --max-width-text: 40ch;
  --header-h: 84px;
}

@media (min-width: 768px) {
  :root {
    --section-pad-x: var(--space-6);
    --section-pad-y: 9rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --section-pad-x: var(--space-7);
    --section-pad-y: var(--space-9);
  }
}

@media (min-width: 1440px) {
  :root {
    --section-pad-x: var(--space-8);
  }
}