/* ============================================================
   variables.css — Design tokens / Variáveis globais
   ============================================================ */

:root {
  /* Cores principais */
  --color-ice:    #C8E8F5;
  --color-cold:   #0A9FD4;
  --color-deep:   #034C70;
  --color-dark:   #071925;
  --color-darker: #050f18;
  --color-accent: #00D4FF;

  /* Tipografia */
  --font-display:    'Bebas Neue', sans-serif;
  --font-condensed:  'Barlow Condensed', sans-serif;
  --font-body:       'Barlow', sans-serif;

  /* Espaçamentos */
  --spacing-xs:  0.5rem;   /*  8px */
  --spacing-sm:  1rem;     /* 16px */
  --spacing-md:  1.5rem;   /* 24px */
  --spacing-lg:  2.5rem;   /* 40px */
  --spacing-xl:  4rem;     /* 64px */
  --spacing-2xl: 6.25rem;  /* 100px */

  /* Layout */
  --container-max: 1280px;
  --container-pad: 5%;

  /* Bordas */
  --border-accent: 1px solid rgba(0, 212, 255, 0.2);
  --border-faint:  1px solid rgba(0, 212, 255, 0.1);

  /* Transições */
  --transition-fast: 0.2s ease;
  --transition-mid:  0.3s ease;

  /* Z-index */
  --z-navbar: 100;
  --z-overlay: 10;
}