/* Caminho: public_html/assets/css/variables.css */
/* Diamond Parts | Tokens de design (paleta, tipografia, espacamento, radius, shadows) */

:root {
  /* ==========================================================
     1) PALETA DE CORES
     ========================================================== */
  --color-bg:            #0A0A0A;        /* preto profundo */
  --color-bg-elev-1:     #121212;        /* superficie nivel 1 */
  --color-bg-elev-2:     #1A1A1A;        /* superficie nivel 2 (cards) */
  --color-bg-elev-3:     #242424;        /* hover de cards */

  --color-silver:        #C0C0C0;        /* prata cromada (logo) */
  --color-silver-bright: #E8E8E8;        /* prata clara (texto destaque) */
  --color-silver-dim:    #8A8A8A;        /* prata fosca */

  --color-text:          #F5F5F5;        /* texto principal */
  --color-text-muted:    #9A9A9A;        /* textos secundarios */
  --color-text-dim:      #666666;        /* legendas */

  --color-accent:        #E50914;        /* vermelho automotivo */
  --color-accent-hover:  #B0060F;        /* hover */
  --color-accent-soft:   rgba(229, 9, 20, 0.12);

  --color-success:       #16A34A;
  --color-warning:       #F59E0B;
  --color-danger:        #DC2626;

  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  /* ==========================================================
     2) GRADIENTES
     ========================================================== */
  --gradient-silver:     linear-gradient(180deg, #E8E8E8 0%, #C0C0C0 50%, #8A8A8A 100%);
  --gradient-dark:       linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%);
  --gradient-accent:     linear-gradient(135deg, #E50914 0%, #B0060F 100%);
  --gradient-overlay:    linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.95) 100%);

  /* ==========================================================
     3) TIPOGRAFIA
     ========================================================== */
  --font-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala tipografica fluid (clamp) */
  --fs-xs:   clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --fs-xl:   clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --fs-2xl:  clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --fs-3xl:  clamp(2.25rem, 1.9rem + 1.6vw, 3rem);
  --fs-4xl:  clamp(2.75rem, 2.2rem + 2.4vw, 4rem);
  --fs-hero: clamp(3rem, 2.4rem + 3.2vw, 5.25rem);

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.12em;

  /* ==========================================================
     4) ESPACAMENTO (sistema 8px)
     ========================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ==========================================================
     5) LAYOUT
     ========================================================== */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;

  --header-h:      120px;
  --header-h-mob:  84px;

  /* ==========================================================
     6) RAIO E SOMBRAS
     ========================================================== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-glow-accent: 0 0 24px rgba(229, 9, 20, 0.35);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ==========================================================
     7) TRANSICOES
     ========================================================== */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --duration-fast:  160ms;
  --duration-base:  280ms;
  --duration-slow:  480ms;

  /* ==========================================================
     8) Z-INDEX
     ========================================================== */
  --z-dropdown:  1000;
  --z-sticky:    1100;
  --z-header:    1200;
  --z-modal:     1300;
  --z-toast:     1400;
  --z-whatsapp:  1500;
}