/* ==========================================================================
   TOKENS — camada 1 da arquitetura ITCSS
   Única fonte de verdade para cores, tipografia, espaçamento e raios.
   Tema dark-only, idêntico ao aplicativo Capela Acústica.
   ========================================================================== */

:root {
  /* --- Cores da marca ------------------------------------------------- */
  --background: #0B0E13;   /* fundo geral */
  --surface: #131820;      /* cards e superfícies */
  --surface-high: #1B2230; /* superfícies elevadas (faixas de destaque) */
  --border: #232B3A;       /* bordas de 1px */
  --gold: #C9973B;         /* dourado principal (ações, acordes) */
  --gold-soft: #E0B96A;    /* dourado claro (hover, texto sobre escuro) */
  --cream: #F3E9D4;        /* texto principal */
  --cream-muted: #B9AF9C;  /* texto secundário */
  --danger: #E07A5F;       /* erros e avisos */

  /* --- Raios ----------------------------------------------------------- */
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* --- Tipografia ------------------------------------------------------ */
  --font-display: 'Julius Sans One', 'Trebuchet MS', Georgia, serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Hierarquia de títulos: 40 / 32 / 26 / 22 / 18 / 16 px (fluida) */
  --text-h1: clamp(2rem, 1.4rem + 2.4vw, 2.5rem);      /* até 40px */
  --text-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2rem);    /* até 32px */
  --text-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);/* até 26px */
  --text-h4: 1.375rem;                                  /* 22px */
  --text-h5: 1.125rem;                                  /* 18px */
  --text-h6: 1rem;                                      /* 16px */
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-tiny: 0.75rem;

  --tracking-display: 0.15em; /* ~2px–3px em títulos */
  --leading-body: 1.6;

  /* --- Escala de espaçamento (base 4px) -------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 1120px;
  --header-height: 72px;

  /* --- Movimento --------------------------------------------------------- */
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;

  /* Cor de esquema para formulários nativos */
  color-scheme: dark;
}