/**
 * variables.css - Design Tokens para Toni Deivid
 *
 * Tema escuro premium inspirado em tonyrobbins.com.
 * Todas as cores, tipografia, espacamento, sombras e transicoes
 * sao centralizados aqui como CSS custom properties.
 */

:root {
  /* ============================================
     CORES - TONI DEIVID
     Tema: Escuro premium, inspirado em tonyrobbins.com
     ============================================ */

  /* Fundos */
  --bg-primary:          #1d1d1d;
  --bg-secondary:        #252525;
  --bg-dark:             #111111;
  --bg-white:            #FFFFFF;
  --bg-overlay:          rgba(29, 29, 29, 0.6);

  /* Cores principais */
  --color-gold:          #fcd35f;
  --color-gold-hover:    #fdd97a;
  --color-gold-dark:     #d4b035;

  /* Texto */
  --text-primary:        #FFFFFF;
  --text-secondary:      #c9c9c9;
  --text-muted:          #888888;
  --text-dark:           #1d1d1d;

  /* Transparencias - branco */
  --border-subtle:       rgba(255, 255, 255, 0.06);
  --border-light:        rgba(255, 255, 255, 0.1);

  /* Transparencias - dourado */
  --gold-10:             rgba(252, 211, 95, 0.1);
  --gold-20:             rgba(252, 211, 95, 0.2);
  --gold-50:             rgba(252, 211, 95, 0.5);

  /* Transparencias - escuro */
  --header-scrolled:     rgba(17, 17, 17, 0.95);

  /* Funcionais */
  --color-success:       #4CAF50;
  --color-error:         #f44336;

  /* ============================================
     TIPOGRAFIA
     ============================================ */
  --font-heading:        'Montserrat', sans-serif;
  --font-body:           'Inter', sans-serif;

  /* Tamanhos fluidos */
  --fs-display:          clamp(2.5rem, 6vw, 4rem);
  --fs-h2:               clamp(1.75rem, 4vw, 2.75rem);
  --fs-h3:               clamp(1.25rem, 3vw, 1.75rem);
  --fs-body:             clamp(1rem, 1.5vw, 1.125rem);
  --fs-body-lg:          clamp(1.125rem, 2vw, 1.375rem);
  --fs-small:            clamp(0.875rem, 1.2vw, 1rem);
  --fs-micro:            0.75rem;
  --fs-counter:          clamp(2rem, 5vw, 3rem);

  /* Pesos */
  --fw-regular:          400;
  --fw-semibold:         600;
  --fw-bold:             700;

  /* Alturas de linha */
  --lh-heading:          1.2;
  --lh-body:             1.7;

  /* Espacamento de letras */
  --ls-eyebrow:          0.2em;
  --ls-heading:          -0.02em;

  /* ============================================
     ESPACAMENTO (escala de 8px)
     ============================================ */
  --space-xs:            0.5rem;
  --space-sm:            1rem;
  --space-md:            1.5rem;
  --space-lg:            2rem;
  --space-xl:            3rem;
  --space-2xl:           4rem;
  --space-3xl:           6rem;
  --space-section:       clamp(4rem, 10vw, 8rem);

  /* ============================================
     LAYOUT
     ============================================ */
  --container-max:       1200px;
  --container-padding:   clamp(1rem, 4vw, 2rem);
  --header-height:       80px;

  /* ============================================
     BORDAS E SOMBRAS
     ============================================ */
  --radius-sm:           8px;
  --radius-md:           12px;
  --radius-lg:           16px;
  --radius-xl:           24px;
  --radius-pill:         9999px;
  --radius-circle:       50%;

  --shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:           0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:           0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-cta:          0 4px 20px rgba(252, 211, 95, 0.3);
  --shadow-card:         0 2px 12px rgba(0, 0, 0, 0.2);
  --shadow-header:       0 2px 20px rgba(0, 0, 0, 0.5);

  /* ============================================
     TRANSICOES
     ============================================ */
  --transition-fast:     150ms ease;
  --transition-base:     300ms ease;
  --transition-slow:     500ms ease;
  --transition-smooth:   600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --z-base:              1;
  --z-cards:             10;
  --z-header:            100;
  --z-overlay:           500;
  --z-mobile-menu:       900;
  --z-modal:             1000;
}