/**
 * NOVVA DESIGN SYSTEM — Tokens
 * Versão: 1.0.0
 * Importe este arquivo em ambas as landing pages:
 *   <link rel="stylesheet" href="design-tokens.css">
 *
 * Uso nos arquivos HTML:
 *   color: var(--color-brand-blue);
 *   padding: var(--space-8);
 */

/* ============================================================
   PALETA — TEMA DARK (index-atleta.html — Performance)
   ============================================================ */
:root {
  --dark-bg-primary:  #050A14;
  --dark-bg-card:     #0D1525;
  --dark-bg-section:  #091020;
  --dark-brand-blue:  #0A4EFF;
  --dark-brand-glow:  #1E6BFF;
  --dark-brand-cyan:  #00D4FF;
  --dark-border:      #1A2B4A;
  --dark-card-bg:     #13264A;
  --dark-card-border: #1E3A6A;
}

/* ============================================================
   PALETA — TEMA LIGHT (index.html — Saúde & Longevidade)
   ============================================================ */
:root {
  --light-bg:         #ffffff;
  --light-bg-soft:    #F8FAFF;
  --light-navy:       #0A1628;
  --light-navy-card:  #13264A;
  --light-blue:       #1E6FFF;
  --light-blue-pale:  #EEF4FF;
  --light-teal:       #0EA5E9;
  --light-border:     #1E3A6A;
  --light-border-ui:  #E2E8F0;
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
:root {
  --font-sans: 'Inter', sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-black:     900;

  --leading-none:   1;
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;
}

/* ============================================================
   ESPAÇAMENTOS
   ============================================================ */
:root {
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-28: 7rem;      /* 112px */
  --space-32: 8rem;      /* 128px */
}

/* ============================================================
   BORDER RADIUS
   ============================================================ */
:root {
  --radius-sm:   0.5rem;    /*  8px — rounded-lg */
  --radius-md:   0.75rem;   /* 12px — rounded-xl */
  --radius-lg:   1rem;      /* 16px — rounded-2xl */
  --radius-full: 9999px;    /* círculo / pill */
}

/* ============================================================
   BOTÕES — tamanhos padronizados
   ============================================================ */
:root {
  /* sm — navbar, badges */
  --btn-sm-px:   1.25rem;       /* px-5  */
  --btn-sm-py:   0.5rem;        /* py-2  */
  --btn-sm-text: var(--text-sm);
  --btn-sm-r:    var(--radius-sm);

  /* md — uso geral */
  --btn-md-px:   1.5rem;        /* px-6  */
  --btn-md-py:   0.75rem;       /* py-3  */
  --btn-md-text: var(--text-base);
  --btn-md-r:    var(--radius-md);

  /* lg — hero / CTA principal */
  --btn-lg-px:   2rem;          /* px-8  */
  --btn-lg-py:   1rem;          /* py-4  */
  --btn-lg-text: var(--text-lg);
  --btn-lg-r:    var(--radius-md);
}

/* ============================================================
   ÍCONES
   ============================================================ */
:root {
  --icon-sm: 16px;   /* detalhe / inline */
  --icon-md: 24px;   /* uso geral */
  --icon-lg: 32px;   /* cards compact */
  --icon-xl: 40px;   /* cards grandes */
}

/* ============================================================
   SOMBRAS
   ============================================================ */
:root {
  /* Dark theme */
  --shadow-card-dark:    0 8px 28px rgba(10, 78, 255, 0.20);
  --shadow-btn-dark:     0 12px 40px rgba(10, 78, 255, 0.55);
  --shadow-glow-dark:    0 0 32px rgba(10, 78, 255, 0.55);
  --shadow-glow-sm-dark: 0 0 16px rgba(10, 78, 255, 0.40);

  /* Light theme */
  --shadow-card-light:   0 8px 32px rgba(30, 111, 255, 0.12);
  --shadow-btn-light:    0 12px 36px rgba(30, 111, 255, 0.35);
}

/* ============================================================
   ANIMAÇÕES
   ============================================================ */
:root {
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Duração e amplitude do float — Dark vs Light */
  --float-duration-dark:    3.5s;
  --float-amplitude-dark:  -12px;
  --float-duration-light:   4s;
  --float-amplitude-light: -8px;
}

/* ============================================================
   CLASSES UTILITÁRIAS COMPARTILHADAS
   ============================================================ */

/* Ícones */
.icon-sm { width: var(--icon-sm);  height: var(--icon-sm);  }
.icon-md { width: var(--icon-md);  height: var(--icon-md);  }
.icon-lg { width: var(--icon-lg);  height: var(--icon-lg);  }
.icon-xl { width: var(--icon-xl);  height: var(--icon-xl);  }

/* Card Dark (compartilhado) */
.card-dark {
  background:  var(--dark-card-bg);
  border:      1px solid var(--dark-card-border);
  transition:  all var(--transition-base);
}
.card-dark:hover {
  border-color: var(--dark-brand-blue);
  box-shadow:   var(--shadow-card-dark);
  transform:    translateY(-3px);
}

/* Card Light (compartilhado) */
.card-light {
  background:  #ffffff;
  border:      1px solid var(--light-border-ui);
  transition:  all var(--transition-base);
}
.card-light:hover {
  border-color: var(--light-blue);
  box-shadow:   var(--shadow-card-light);
  transform:    translateY(-3px);
}

/* Botão Primário — Dark */
.btn-primary-dark {
  background:  linear-gradient(135deg, #0A4EFF 0%, #0066DD 100%);
  color:       #ffffff;
  font-weight: var(--font-bold);
  display:     inline-block;
  transition:  all var(--transition-base);
}
.btn-primary-dark:hover {
  background:  linear-gradient(135deg, #1E6BFF 0%, #0A4EFF 100%);
  transform:   translateY(-2px);
  box-shadow:  var(--shadow-btn-dark);
}

/* Botão Primário — Light */
.btn-primary-light {
  background:  linear-gradient(135deg, #1E6FFF 0%, #0EA5E9 100%);
  color:       #ffffff;
  font-weight: var(--font-bold);
  display:     inline-block;
  transition:  all var(--transition-base);
}
.btn-primary-light:hover {
  background:  linear-gradient(135deg, #2563EB 0%, #0284C7 100%);
  transform:   translateY(-2px);
  box-shadow:  var(--shadow-btn-light);
}

/* Botão Outline */
.btn-outline-dark {
  border:      2px solid var(--dark-border);
  color:       #9CA3AF;
  display:     inline-block;
  transition:  all var(--transition-base);
}
.btn-outline-dark:hover {
  border-color: var(--dark-brand-blue);
  color:        #ffffff;
}