/* ==========================================================================
   Design Tokens — BarberSy
   Fonte única de verdade para todas as variáveis de design do projeto.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Rouge+Script&display=swap');

:root {
  /* ── Cores ─────────────────────────────────────────────── */
  --color-brand:        #1e1e1e;   /* cor primária / textos de destaque */
  --color-brand-hover:  #3f3f3f;   /* brand mais suave, hover de links   */
  --color-muted:        #7a7a7a;   /* textos secundários / labels footer  */
  --color-border:       #d3d3d3;   /* bordas, divisores                   */
  --color-border-hover: #9a9a9a;   /* borda no estado hover               */
  --color-surface:      #f9fff9;   /* background geral da página          */
  --color-surface-alt:  #f3f3f0;   /* superfície levemente mais escura (sobre preview) */
  --color-surface-soft: #f7f7f5;   /* superfície suave (func-card--soft)  */
  --color-on-brand:     #f9fff9;   /* texto sobre fundo escuro (botões)   */
  --color-shadow:       rgba(0, 0, 0, 0.10);
  --color-active:       #22c55e;   /* verde: ponto ativo / online         */

  /* ── Glassmorphism ──────────────────────────────────────── */
  --color-glass-bg:     rgba(249, 255, 249, 0.82);
  --color-glass-blur:   12px;

  /* ── Tipografia ────────────────────────────────────── */
  --font-base:    'Outfit', system-ui, -apple-system, sans-serif;
  --font-script:  'Rouge Script', 'Georgia', cursive;
  --text-xs:      0.75rem;    /* 12px */
  --text-sm:      0.875rem;   /* 14px */
  --text-base:    1rem;       /* 16px */
  --text-lg:      1.125rem;   /* 18px */
  --text-xl:      1.6rem;     /* ~26px */
  --text-2xl:     2rem;       /* 32px */
  --text-3xl:     3rem;       /* 48px */

  --font-light:   300;
  --font-regular: 400;
  --font-medium:  500;
  --font-semibold:600;

  --letter-spacing-base: 0.2px;

  /* ── Espaçamento (escala de 4px) ───────────────────── */
  --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 */

  /* ── Raios de borda ─────────────────────────────────── */
  --radius-sm:  0.5rem;   /*  8px */
  --radius-md:  0.75rem;  /* 12px */
  --radius-lg:  1.25rem;  /* 20px */
  --radius-full:9999px;

  /* ── Sombras ─────────────────────────────────────────── */
  --shadow-nav: 0 2px 10px 0 var(--color-shadow);

  /* ── Transições ──────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;

  /* ── Layout ──────────────────────────────────────────── */
  --nav-height:      60px;
  --content-padding: clamp(var(--space-6), 8vw, 6rem);

  /* ── Seção: tipografia de cabeçalho ─────────────────── */
  --section-label-size:    var(--text-xs);
  --section-title-size:    clamp(1.75rem, 4vw, 2.75rem);
  --section-subtitle-size: clamp(var(--text-base), 1.8vw, var(--text-lg));

  /* ── Animações de entrada (scroll reveal) ────────────── */
  --reveal-duration:   1000ms;
  --reveal-easing:     cubic-bezier(0.25, 1, 0.5, 1);
  --reveal-stagger:    150ms;
}