/* ==========================================================================
   ANA MANACORDA — Variáveis globais (identidade oficial)
   Identidade: AZUL-MARINHO (base/estrutura) + DOURADO METÁLICO (destaque premium).
   Toda a identidade de cor vive aqui, em tokens. Os componentes usam var(--…);
   nenhuma cor de identidade é escrita solta nos componentes.
   ========================================================================== */

:root {
  /* ---- Núcleo da paleta oficial ---- */
  --navy-900: #040C16;   /* azul quase preto — fundo mais profundo */
  --navy-800: #031327;   /* azul-marinho principal — fundo da página */
  --navy-700: #0B1A30;   /* elevação sutil (derivado) */
  --navy-600: #151D2A;   /* azul escuro secundário — superfícies */
  --navy-500: #1E2A3D;   /* superfície elevada / hover (derivado) */

  --gold:        #CEA572; /* dourado principal */
  --gold-light:  #E2C090; /* dourado claro */
  --gold-mid:    #AA875F; /* dourado médio / sombra */
  --gold-bronze: #806447; /* bronze dourado escuro */
  --gold-deep:   #503F33; /* dourado profundo */
  --gold-reflex: #EFE1C4; /* reflexo dourado claro */

  /* ---- Compatibilidade de nomes (papéis remapeados para o tema escuro) ----
     Mantidos porque os componentes já os referenciam; agora apontam para as
     superfícies navy e, no caso do gradiente premium, para o dourado. */
  --color-background:  var(--navy-800);   /* fundo da página */
  --color-off-white:   var(--navy-600);   /* bloco/superfície secundária */
  --color-blue-light:  var(--navy-700);   /* destaque frio / admin */
  --color-beige-light: var(--navy-600);   /* superfície (era "quente") */
  --color-beige-gray:  #1B2740;           /* trilhos e linhas neutras */
  --color-beige-medium: var(--gold-mid);  /* usado no gradiente premium → dourado */

  /* ---- Papéis de superfície ---- */
  --surface: var(--navy-600);         /* cartões e blocos elevados */
  --surface-soft: var(--navy-700);    /* blocos secundários */
  --surface-cool: var(--navy-700);    /* destaques frios / admin */
  --surface-warm: var(--navy-500);    /* destaques mais claros */
  --page-gradient: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);

  /* ---- Linhas e bordas (claras sobre o escuro, com tom dourado discreto) ---- */
  --line: rgba(206, 165, 114, 0.16);
  --line-soft: rgba(206, 165, 114, 0.12);
  --line-strong: rgba(206, 165, 114, 0.32);
  --gold-border: rgba(206, 165, 114, 0.55);

  /* ---- Texto (claro sobre navy) ----
     Contraste sobre #031327: ink 14,6:1 · ink-soft 10,8:1 · ink-mute 6,4:1.
     on-gold é o texto escuro usado SOBRE o dourado (8,1:1 sobre #CEA572). */
  --ink: #F3ECDF;
  --ink-soft: #C7CDD8;
  --ink-mute: #9AA3B2;
  --on-gold: #26190E;
  --ink-004: rgba(255, 255, 255, 0.04);
  --ink-08: rgba(255, 255, 255, 0.08);
  --ink-14: rgba(255, 255, 255, 0.14);

  /* ---- Acento dourado (ações / destaques premium) ---- */
  --accent: var(--gold);
  --accent-strong: var(--gold-light);
  --accent-grad: linear-gradient(145deg, var(--gold-light) 0%, var(--gold-mid) 100%);
  --gold-glow: rgba(206, 165, 114, 0.22);

  /* ---- Foco (visível, não depende só de cor) ---- */
  --focus: var(--gold-light);

  /* ---- Estados ---- */
  --success: #86C08F;
  --warn: var(--gold-light);
  --error: #E8938A;

  /* ---- Tipografia ---- */
  --font-display: "Cormorant Garamond", "Didot", "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Escala tipográfica única (referência de corpo = 16px, §9). Títulos usam
     clamp() no elemento (global.css) para escalar entre mobile e desktop. */
  --fs-xs: 0.75rem;     /* 12px — auxiliar mínimo / rótulos de grupo */
  --fs-sm: 0.8125rem;   /* 13px — texto auxiliar, labels */
  --fs-base: 1rem;      /* 16px — corpo principal */
  --fs-md: 1.125rem;    /* 18px — H4 / destaque de corpo */
  --fs-lg: 1.375rem;    /* 22px — H3 (teto) */
  --fs-xl: 1.75rem;     /* 28px — H2 (teto) */
  --fs-2xl: 2.25rem;    /* 36px — H1 (teto) */
  --fs-3xl: 2.5rem;     /* 40px — números de destaque (cartão) */

  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;
  --tracking-widest: 0.32em;

  /* ---- Espaçamento ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;
  --space-9: 5rem;

  /* ---- Raios ---- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  /* ---- Sombras (escuras e discretas, coerentes com o navy) ---- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 10px 24px -18px rgba(0, 0, 0, 0.62);
  --shadow-md: 0 26px 50px -32px rgba(0, 0, 0, 0.72);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---- Transições ---- */
  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);
  --t-fast: 160ms var(--ease);
  --t-base: 280ms var(--ease);
  --t-slow: 900ms var(--ease);

  /* ---- Layout ---- */
  --content-max: 1120px;
  --content-narrow: 560px;
  --bottom-nav-h: 68px;
  --sidebar-w: 258px;
}