/* ============================================================
   TERMOPLAS — Design Tokens
   "Engenharia Silenciosa": superfícies calmas, detalhe preciso.
   ============================================================ */

@import url('../assets/fonts/fonts.css');

:root {
  /* ---- Cor: base neutra ---- */
  --white:        #ffffff;
  --paper:        #f4f5f7;   /* cinza claro */
  --paper-2:      #eceef1;
  --paper-3:      #e2e5ea;

  /* ---- Cor: grafite ---- */
  --graphite:     #232639;   /* extraído do logo */
  --graphite-800: #171a26;
  --graphite-900: #0e1016;   /* fundo "cinema" */
  --graphite-950: #090a0f;

  /* ---- Cor: bordô (somente destaque) ---- */
  --bordo:        #8d1739;   /* extraído do logo */
  --bordo-600:    #7a1430;
  --bordo-400:    #b5325a;
  --bordo-glow:   rgba(141, 23, 57, 0.35);

  /* ---- Cor: texto ---- */
  --ink:          #232639;
  --ink-70:       rgba(35, 38, 57, 0.72);
  --muted:        #61667a;
  --muted-2:      #8a90a1;
  --on-dark:      #eef0f4;
  --on-dark-70:   rgba(238, 240, 244, 0.66);
  --on-dark-40:   rgba(238, 240, 244, 0.40);

  /* ---- Linhas / superfícies ---- */
  --line:         rgba(35, 38, 57, 0.12);
  --line-strong:  rgba(35, 38, 57, 0.22);
  --line-dark:    rgba(238, 240, 244, 0.14);
  --surface:      rgba(35, 38, 57, 0.03);

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

  /* escala fluida */
  --fs-eyebrow:   clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --fs-body:      clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  --fs-lead:      clamp(1.12rem, 1rem + 0.7vw, 1.5rem);
  --fs-h3:        clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  --fs-h2:        clamp(2rem, 1.2rem + 3.4vw, 4rem);
  --fs-display:   clamp(2.8rem, 1rem + 8vw, 8.5rem);
  --fs-mega:      clamp(4rem, 1rem + 14vw, 15rem);

  /* ---- Espaço / layout ---- */
  --container:    1440px;
  --gutter:       clamp(1.25rem, 5vw, 6rem);
  --section-y:    clamp(5.5rem, 11vh, 12rem);
  --radius:       14px;
  --radius-lg:    22px;

  /* ---- Motion ---- */
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out (curva mestre) */
  --ease-inout:   cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast:     0.35s;
  --dur:          0.7s;
  --dur-slow:     1.1s;

  /* ---- Elevação ---- */
  --shadow-soft:  0 24px 60px -30px rgba(14, 16, 22, 0.35);
  --shadow-card:  0 40px 90px -50px rgba(14, 16, 22, 0.55);

  --nav-h:        84px;
}

@media (max-width: 720px) {
  :root { --nav-h: 68px; }
}