/* ==========================================================================
   PR Gestão Empresarial — Design tokens (CORTE 1)
   --------------------------------------------------------------------------
   Base PROVISÓRIA derivada dos ativos de marca recebidos
   (assets/brand/logo.png e assets/brand/logo-wordmark.png).

   A marca recebida é ACROMÁTICA: preto + cromado/prata em degradê.
   Nenhuma paleta cromática nova foi inventada neste corte.
   Ao receber a identidade visual oficial do cliente, alterar apenas esta
   camada de tokens — nenhum componente referencia cor literal.
   ========================================================================== */

:root {
  /* --- Neutros derivados da marca ------------------------------------- */
  --pr-ink: #0c0d0f;          /* fundo da marca / preto institucional      */
  --pr-ink-2: #131519;
  --pr-graphite: #1c1f24;
  --pr-steel: #3a3e45;        /* sombra média do cromado                   */
  --pr-silver: #9aa0a8;       /* meio-tom dominante do cromado (~112,112)  */
  --pr-platinum: #d8dbdf;     /* alta-luz do cromado                       */
  --pr-mist: #f3f4f6;
  --pr-white: #ffffff;

  /* --- Papéis semânticos de superfície --------------------------------- */
  --surface: var(--pr-white);
  --surface-muted: var(--pr-mist);
  --surface-inverse: var(--pr-ink);
  --surface-inverse-soft: var(--pr-graphite);

  /* --- Texto ------------------------------------------------------------ */
  --text: #14161a;
  --text-muted: #5b616b;
  --text-subtle: #7c828c;
  --text-on-dark: #f1f2f4;
  --text-on-dark-muted: #a6acb5;
  --text-on-dark-subtle: #8a9099;

  /* --- Linhas e bordas -------------------------------------------------- */
  --line: #e4e6ea;
  --line-strong: #cdd1d7;
  --line-on-dark: rgba(255, 255, 255, .13);
  --line-on-dark-strong: rgba(255, 255, 255, .3);

  /* --- Slot de acento ---------------------------------------------------
     Hoje mapeado no prata da marca. É o ÚNICO ponto a trocar quando o
     cliente confirmar a cor de identidade.                                */
  --accent: var(--pr-steel);
  --accent-on-dark: var(--pr-platinum);

  /* --- Superfície metálica ----------------------------------------------
     Aço escovado derivado do cromado da marca. Usado nos CTAs de contato
     (header, menu mobile) e no botão flutuante de WhatsApp.               */
  --metal-face: linear-gradient(
    135deg,
    #63676b 0%,
    #92969a 16%,
    #c2c5c8 34%,
    #e2e4e6 50%,
    #a8acb0 64%,
    #82868a 80%,
    #5c6064 100%
  );
  --metal-ink: #16181b;
  --metal-edge: rgba(255, 255, 255, .5);

  /* --- Marcação de placeholder de desenvolvimento ----------------------- */
  --dev-border: rgba(12, 13, 15, .2);
  --dev-hatch: rgba(12, 13, 15, .03);
  --dev-fill: #eceef1;
  --dev-text: #6d737c;
  --dev-border-on-dark: rgba(255, 255, 255, .2);
  --dev-hatch-on-dark: rgba(255, 255, 255, .035);
  --dev-fill-on-dark: rgba(255, 255, 255, .035);
  --dev-text-on-dark: #9aa1aa;

  /* --- Tipografia -------------------------------------------------------
     Solução provisória em system stack: nenhuma dependência externa,
     nenhuma fonte declarada como "oficial". Trocar apenas estes dois
     tokens quando a tipografia da marca for confirmada.                   */
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui,
                  -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui,
               -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-eyebrow: .75rem;
  --fs-micro: .8125rem;
  --fs-small: .9375rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.0625rem, .98rem + .35vw, 1.25rem);
  --fs-h4: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --fs-h2: clamp(1.875rem, 1.45rem + 1.8vw, 3.125rem);
  --fs-h1: clamp(2.375rem, 1.7rem + 2.9vw, 4.25rem);
  --fs-mega: clamp(2.75rem, 1.6rem + 5vw, 6rem);

  --lh-tight: 1.06;
  --lh-heading: 1.14;
  --lh-snug: 1.35;
  --lh-body: 1.62;

  --tracking-eyebrow: .16em;
  --tracking-tight: -.02em;
  --tracking-mega: -.035em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Espaçamento (escala de 4px) -------------------------------------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;
  --space-13: 8rem;

  /* Ritmo vertical das seções (fluido) */
  --section-y: clamp(2.75rem, 1.9rem + 4.6vw, 6.5rem);
  --section-y-tight: clamp(2rem, 1.5rem + 2.6vw, 3.5rem);

  /* --- Container -------------------------------------------------------- */
  --container-max: 1240px;
  --container-narrow: 880px;
  --gutter: clamp(1.25rem, .6rem + 2.6vw, 3rem);

  /* --- Raios ------------------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- Sombras ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(12, 13, 15, .06);
  --shadow-md: 0 10px 30px -12px rgba(12, 13, 15, .18);
  --shadow-lg: 0 30px 70px -30px rgba(12, 13, 15, .35);

  /* --- Movimento -------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-inout: cubic-bezier(.65, .05, .36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  /* --- Camadas ---------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-header: 100;
  --z-menu: 200;
  --z-float: 300;

  /* --- Métricas do header ------------------------------------------------ */
  --header-h: 68px;
}

@media (min-width: 1024px) {
  :root { --header-h: 88px; }
}