/* ============================================================
   TRON MOTORS — base.css
   Design System único — tokens globais
   ============================================================ */

/* NOTA: @import removido — fontes carregadas via <link> em head.php (performance) */

:root {
  /* ── Escala de cinza ── */
  --white:          #FFFFFF;
  --off-white:      #F7F8FA;
  --gray-50:        #F2F3F6;
  --gray-100:       #E8EAEE;
  --gray-150:       #DDE0E7;
  --gray-200:       #C9CDD8;
  --gray-300:       #A8AEBB;
  --gray-400:       #838A99;
  --gray-500:       #626978;
  --gray-600:       #464E5F;
  --gray-700:       #323845;
  --gray-800:       #1F2430;
  --gray-900:       #10131A;

  /* ── Prata ── */
  --silver:         #B8BEC9;
  --silver-light:   #D4D8E2;
  --silver-bright:  #E8ECF2;
  --silver-deep:    #8A919E;

  /* ── Acento principal (violeta) ── */
  --accent:         #7C3AED;
  --accent-hover:   #6D28D9;
  --accent-light:   rgba(124,58,237,0.08);
  --accent-border:  rgba(124,58,237,0.22);
  --accent-text:    #5B21B6;

  /* ── Texto ── */
  --text-primary:   #10131A;
  --text-secondary: #323845;
  --text-muted:     #626978;
  --text-faint:     #A8AEBB;

  /* ── Superfícies ── */
  --surface-page:   #F2F3F6;
  --surface-card:   #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #E8EAEE;
  --surface-stripe: #F7F8FA;

  /* ── Bordas ── */
  --border-light:   #ECEEF2;
  --border-base:    #DDE0E7;
  --border-strong:  #C9CDD8;

  /* ── Sombras ── */
  --shadow-xs:   0 1px 2px rgba(16,19,26,0.05);
  --shadow-sm:   0 2px 8px rgba(16,19,26,0.07);
  --shadow-md:   0 4px 20px rgba(16,19,26,0.09);
  --shadow-lg:   0 8px 40px rgba(16,19,26,0.11);
  --shadow-xl:   0 20px 60px rgba(16,19,26,0.16), 0 8px 24px rgba(16,19,26,0.10);
  --shadow-card: 0 2px 12px rgba(16,19,26,0.06), 0 0 0 1px rgba(16,19,26,0.04);
  --shadow-card-hover: 0 8px 36px rgba(16,19,26,0.13), 0 0 0 1px rgba(124,58,237,0.14);
  --shadow-accent: 0 4px 20px rgba(124,58,237,0.28);
  --shadow-header: 0 2px 20px rgba(16,19,26,0.08);

  /* ── Tipografia ── */
  --font-display: 'Rajdhani', sans-serif;
  --font-body:    'Outfit', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --text-xs:   0.72rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.25rem;
  --text-5xl:  4.25rem;

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

  /* ── Espaçamentos ── */
  --space-1:  0.25rem;  --space-2:  0.5rem;
  --space-3:  0.75rem;  --space-4:  1rem;
  --space-5:  1.25rem;  --space-6:  1.5rem;
  --space-8:  2rem;     --space-10: 2.5rem;
  --space-12: 3rem;     --space-16: 4rem;
  --space-20: 5rem;     --space-24: 6rem;
  --space-32: 8rem;

  /* ── Raios ── */
  --radius-sm: 6px;  --radius-md: 10px;
  --radius-lg: 14px; --radius-xl: 20px;
  --radius-full: 9999px;

  /* ── Transições ── */
  --ease:        cubic-bezier(0.4,0,0.2,1);
  --ease-out:    cubic-bezier(0,0,0.2,1);
  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
  --tr-fast:  130ms var(--ease);
  --tr-base:  230ms var(--ease);
  --tr-slow:  380ms var(--ease-out);

  /* ── Alturas de header ── */
  --header-h:        68px;
  --header-h-mobile: 56px;

  /* ── Announcement bar — atualizado via JS quando ativa ── */
  --ann-h: 0px;

  /* ── Z-index ── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
}

/* ── Reset ─────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: var(--gray-100); }
::-webkit-scrollbar-thumb  { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
::selection { background: var(--accent-light); color: var(--accent-text); }

/* ── Tipografia global ── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  color: var(--text-primary);
  letter-spacing: 0.015em;
}
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl);  }
h6 { font-size: var(--text-lg);  }

@media (max-width: 768px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl);  }
}

p  { color: var(--text-muted); line-height: 1.75; }
a  { color: var(--accent); text-decoration: none; transition: color var(--tr-fast); }
a:hover { color: var(--accent-hover); }
strong { font-weight: var(--weight-semibold); color: var(--text-secondary); }
img,video { max-width: 100%; display: block; }
ul,ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input,textarea,select { font-family: inherit; font-size: inherit; }
svg { display: block; }