/* ============================================================
   MANTIK — Design System Variables
   Versão: site-versao-19-06-26 · Refatoração DS v2
   ============================================================ */

:root {
  /* ── Cores principais ── */
  --mantik-orange:        #FA6026;
  --mantik-orange-hover:  #FF7A42;
  --mantik-orange-glow:   rgba(250, 96, 38, 0.25);
  --soft-dark:            #161616;
  --surface:              #232323;
  --surface-card:         rgba(35, 35, 35, 0.85);
  --surface-2:            #2A2A2A;
  --surface-3:            #1C1C1C;
  --graphite:             #4D4D4D;
  --white:                #FFFFFF;
  --gray:                 #B8B8B8;
  --gray-muted:           rgba(184, 184, 184, 0.72);
  --gray-dim:             #6B6B6B;

  /* ── Bordas (DS) ── */
  --border:               rgba(255, 255, 255, 0.08);
  --border-soft:          rgba(184, 184, 184, 0.12);
  --border-orange:        rgba(250, 96, 38, 0.35);

  /* ── Backgrounds (DS) ── */
  --bg-highlight:         rgba(250, 96, 38, 0.08);
  --glass-bg:             rgba(35, 35, 35, 0.85);
  --glass-border:         rgba(255, 255, 255, 0.08);

  /* ── Tipografia ── */
  --font-primary:         'Sofia Sans', sans-serif;
  --font-secondary:       'Inter', sans-serif;
  --font-accent:          'Cormorant Garamond', serif;

  /* ── Escala tipográfica (DS) ── */
  --text-hero:            clamp(42px, 6.5vw, 82px);
  --text-section:         clamp(32px, 4.5vw, 56px);
  --text-card:            clamp(20px, 2vw, 26px);
  --text-body:            clamp(16px, 1.5vw, 18px);
  --text-small:           clamp(13px, 1.2vw, 14px);

  /* ── Espaçamento (DS) ── */
  --section-y:            clamp(80px, 10vw, 140px);
  --container-max:        1280px;
  --container-pad:        40px;
  --container-pad-tablet: 28px;
  --container-pad-mobile: 20px;

  /* ── Radius (DS) ── */
  --radius-btn:           999px;
  --radius-card:          24px;
  --radius-card-sm:       16px;
  --radius-tag:           999px;
  --radius-icon:          12px;

  /* ── Sombras ── */
  --shadow-card:          0 8px 40px rgba(0, 0, 0, 0.45);
  --shadow-orange:        0 0 32px rgba(250, 96, 38, 0.22);
  --shadow-card-hover:    0 16px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(250, 96, 38, 0.35);

  /* ── Clean sections ── */
  --clean:              #F5F3EF;
  --clean-surface:      #FFFFFF;
  --clean-text:         #111111;
  --clean-body:         #4D4D4D;
  --clean-gray:         #6B6B6B;
  --clean-border:       rgba(0, 0, 0, 0.07);
  --clean-border-orange: rgba(250, 96, 38, 0.3);
  --clean-shadow:       0 4px 24px rgba(0, 0, 0, 0.08);
  --clean-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.13), 0 0 0 1px rgba(250, 96, 38, 0.2);

  /* ── Transições ── */
  --transition:           all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow:      all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}