/* ============================================================
   NetAccess — Design tokens (sistema de design vermelho da home)
   ============================================================ */

/* Tipografia Space Grotesk — auto-hospedada (woff2 variável 300–700) */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Marca */
  --brand:      #E11020;
  --brand-600:  #C20D1B;
  --brand-700:  #A60A16;
  --brand-050:  #FFF1F2;
  --brand-100:  #FFE0E3;
  --hero-grad:  linear-gradient(135deg, #E5121F 0%, #B60711 58%, #8C0510 100%);
  --hero-grad-soft: radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,.18), transparent 60%);

  /* Escuros */
  --ink:          #0E0E12;
  --ink-2:        #15151B;
  --surface-dark: #16161D;
  --on-dark:        #FFFFFF;
  --on-dark-muted:  #B7B7C2;
  --on-dark-border: rgba(255,255,255,.12);

  /* Claros */
  --bg:       #FFFFFF;
  --bg-alt:   #F5F5F7;
  --bg-soft:  #FAFAFB;
  --card:     #FFFFFF;
  --border:        #E8E8EE;
  --border-strong: #D7D7DF;

  /* Texto */
  --text:   #14141A;
  --text-2: #3C3C46;
  --muted:  #6C6C77;

  /* Apoio */
  --wpp:      #25D366;
  --wpp-700:  #1EAE57;
  --gold:     #F59E0B;
  --success:  #18A05B;
  --danger:   #D92D20;

  /* Raios */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --pill: 999px;

  /* Sombras */
  --shadow-sm:    0 1px 2px rgba(16,16,24,.06), 0 1px 3px rgba(16,16,24,.04);
  --shadow:       0 10px 30px rgba(16,16,24,.08);
  --shadow-lg:    0 28px 64px rgba(16,16,24,.16);
  --shadow-brand: 0 20px 50px rgba(225,16,32,.32);

  /* Layout */
  --container: 1180px;
  --gutter:    clamp(16px, 4vw, 28px);
  --header-h:  68px;

  /* Tipografia */
  --font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Camadas */
  --z-header: 100;
  --z-menu:   200;
  --z-toast:  300;

  /* Transições */
  --t: 180ms cubic-bezier(.4, 0, .2, 1);
}