/* ==========================================================================
   RR Ferramentaria — Design tokens
   Única fonte de verdade para cor, tipografia, espaço, ritmo e movimento.

   DIREÇÃO: "oficina à noite". Superfícies sólidas com profundidade por luz,
   não por textura — nada de trama quadriculada de fundo. A personalidade vem
   do contraste entre uma serifa de display refinada e a dureza das fotos de
   chão de fábrica.

   TEMA: claro por padrão, para todo visitante. O escuro só entra quando a
   pessoa escolhe no botão do cabeçalho — a escolha é gravada em `data-theme`
   no <html> e relida a cada visita.
   ========================================================================== */

:root {
  /* --- Marca (fixas nos dois temas) ------------------------------------- */
  --brand-red:  #ed3237;
  --brand-blue: #2e3a80;

  /* --- Tipografia ------------------------------------------------------- */
  /*
    Archivo variável nos títulos e no texto, IBM Plex Mono na camada técnica.
    Nos títulos o eixo `wdth` é empurrado: uma grotesca EXPANDIDA — e não a
    condensada, clichê do setor — dá à marca uma voz industrial menos previsível.
  */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --wdth-display: 116%;
  --wdth-mid: 106%;

  /* Escala fluida — mínimo mobile, máximo desktop */
  --fs-mono:    0.6875rem;                                   /* 11px — etiquetas */
  --fs-sm:      0.8125rem;                                   /* 13px */
  --fs-base:    clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);/* 15 → 17 */
  --fs-lg:      clamp(1.0625rem, 0.97rem + 0.45vw, 1.3125rem);/* 17 → 21 */
  --fs-xl:      clamp(1.25rem, 1.08rem + 0.8vw, 1.75rem);    /* 20 → 28 */
  --fs-h3:      clamp(1.25rem, 1.08rem + 0.85vw, 1.75rem);   /* 20 → 28 */
  --fs-h2:      clamp(1.6rem, 1.3rem + 1.45vw, 2.45rem);     /* 26 → 39 */
  --fs-h1:      clamp(2rem, 1.42rem + 2.6vw, 3.5rem);        /* 32 → 56 */
  --fs-display: clamp(2.05rem, 1.1rem + 4.2vw, 4.75rem);     /* 33 → 76 */

  --lh-display: 1.02;
  --lh-title:   1.12;
  --lh-copy:    1.62;

  --tr-mono: 0.15em;

  /* --- Espaço ----------------------------------------------------------- */
  --section-y:    clamp(4.5rem, 8.5vw, 9rem);
  --section-y-sm: clamp(3rem, 6vw, 5.5rem);
  --gutter:       clamp(1.25rem, 4vw, 3.5rem);
  --maxw:         81rem;
  --maxw-text:    46rem;

  /* --- Forma ------------------------------------------------------------ */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;

  /* --- Movimento -------------------------------------------------------- */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 460ms;
  --dur-4: 800ms;

  /* --- Layout fixo ------------------------------------------------------ */
  --header-h: 76px;

  /* --- Véu sobre fotografia (escuro nos dois temas, por definição) ------- */
  --scrim-soft: rgba(8, 10, 14, 0.55);
  --scrim-hard: rgba(8, 10, 14, 0.92);
}

@media (max-width: 900px) {
  :root { --header-h: 62px; }
}

/* ==========================================================================
   TEMA CLARO — o padrão do site, para todo visitante
   Alumínio escovado, não papel. Vale mesmo quando o sistema da pessoa está
   no escuro: só o botão do cabeçalho muda isso.
   ========================================================================== */

:root {
  color-scheme: light;

  --bg:          #f4f5f7;
  --surface:     #ffffff;  /* painéis e cartões */
  --surface-2:   #eceef2;  /* campo de formulário, estados hover */
  --fg:          #0e1015;
  --fg-muted:    #585f6e;  /* 5,9:1 sobre --bg */
  --line:        rgba(14, 16, 21, 0.12);
  --line-strong: rgba(14, 16, 21, 0.24);
  --field-border: #8a909e;

  --accent:      #d81f27;  /* 4,6:1 sobre --bg */
  --accent-soft: rgba(216, 31, 39, 0.10);
  --link:        #2e3a80;

  /* Bloco invertido: no claro ele DESCE para quase-preto */
  --invert-bg:     #0e1117;
  --invert-fg:     #f2f3f6;
  --invert-muted:  #9aa1b0;
  --invert-line:   rgba(255, 255, 255, 0.12);
  --invert-border: rgba(255, 255, 255, 0.40);

  --shadow-1: 0 1px 2px rgba(14, 16, 21, 0.07);
  --shadow-2: 0 26px 60px -32px rgba(14, 16, 21, 0.35);

  /* Luz de bancada: profundidade sem textura */
  --glow: radial-gradient(90% 70% at 50% -10%, rgba(46, 58, 128, 0.07), transparent 70%);
}

/* ==========================================================================
   TEMA ESCURO — só por escolha explícita do visitante
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #0a0c11;
  --surface:     #11141b;
  --surface-2:   #181c25;
  --fg:          #edeef2;
  --fg-muted:    #9ca3b2;  /* 7,7:1 sobre --bg */
  --line:        rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.21);
  --field-border: rgba(255, 255, 255, 0.42);

  --accent:      #f0393e;  /* 5,0:1 sobre --bg */
  --accent-soft: rgba(240, 57, 62, 0.14);
  --link:        #7d8bec;

  /* Bloco invertido: no escuro ele SOBE, em vez de descer */
  --invert-bg:     #151a24;
  --invert-fg:     #f3f4f7;
  --invert-muted:  #a3aab8;
  --invert-line:   rgba(255, 255, 255, 0.10);
  --invert-border: rgba(255, 255, 255, 0.38);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.55);
  --shadow-2: 0 26px 64px -32px rgba(0, 0, 0, 0.85);

  --glow: radial-gradient(90% 70% at 50% -10%, rgba(125, 139, 236, 0.16), transparent 70%);
}

/*
  Bloco invertido. Redefine só os papéis semânticos, nunca as cores da marca —
  assim todo componente dentro dele acerta a cor sem regra extra.
*/
.section--invert {
  --bg:           var(--invert-bg);
  --surface:      rgba(255, 255, 255, 0.05);
  --surface-2:    rgba(255, 255, 255, 0.08);
  --fg:           var(--invert-fg);
  --fg-muted:     var(--invert-muted);
  --line:         var(--invert-line);
  --line-strong:  rgba(255, 255, 255, 0.24);
  --field-border: var(--invert-border);
  --accent:       #f0393e;
  --link:         #7d8bec;
  color: var(--fg);
  background-color: var(--bg);
}