/* ================================================
   VARIÁVEIS DE DESIGN — SISTEMA DE TOKENS
   Fotógrafo Premium — Site Institucional
   ================================================ */

:root {
  /* CORES */
  --branco:       #FAFAF8;
  --bege:         #F2EDE6;
  --bege-med:     #E8E0D5;
  --preto:        #0D0D0D;
  --cinza-esc:    #1A1A1A;
  --cinza:        #3A3A3A;
  --cinza-med:    #6B6B6B;
  --cinza-cla:    #A8A8A8;
  --dourado:      #B8985A;
  --dourado-cla:  #D4B578;

  /* TIPOGRAFIA */
  --fonte-display: 'Cormorant Garamond', Georgia, serif;
  --fonte-corpo:   'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* TAMANHOS */
  --texto-xs:   0.75rem;    /* 12px */
  --texto-sm:   0.875rem;   /* 14px */
  --texto-base: 1rem;       /* 16px */
  --texto-md:   1.125rem;   /* 18px */
  --texto-lg:   1.375rem;   /* 22px */
  --texto-xl:   1.75rem;    /* 28px */
  --texto-2xl:  2.25rem;    /* 36px */
  --texto-3xl:  3rem;       /* 48px */
  --texto-4xl:  4rem;       /* 64px */
  --texto-5xl:  5.5rem;     /* 88px */
  --texto-hero: clamp(3rem, 8vw, 7rem);

  /* ESPAÇAMENTOS */
  --esp-xs:   0.5rem;
  --esp-sm:   1rem;
  --esp-md:   2rem;
  --esp-lg:   4rem;
  --esp-xl:   6rem;
  --esp-2xl:  8rem;
  --esp-3xl:  12rem;

  /* LAYOUT */
  --max-width:      1440px;
  --gutter:         clamp(1.5rem, 5vw, 5rem);
  --gutter-sm:      clamp(1rem, 3vw, 2rem);

  /* TRANSIÇÕES */
  --trans-rapida:   0.2s ease;
  --trans-media:    0.4s ease;
  --trans-lenta:    0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* BORDAS */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* SOMBRAS */
  --sombra-sm:  0 2px 20px rgba(0,0,0,0.08);
  --sombra-md:  0 8px 40px rgba(0,0,0,0.12);
  --sombra-lg:  0 20px 60px rgba(0,0,0,0.2);

  /* Z-INDEX */
  --z-base:     1;
  --z-card:     10;
  --z-sticky:   100;
  --z-nav:      200;
  --z-overlay:  300;
  --z-modal:    400;
}