/*
  Design tokens — Instituto Longevida (Medicina Integrativa)
  Sistema: "Editorial Luxe" — navy profundo + dourado/bronze + marfim quente,
  serifada display + sans utilitária com tracking largo.
  Estrutura: 1) Primitivos  2) Semânticos  3) Componentes
*/

:root {
  /* ============ 1. PRIMITIVOS ============ */

  /* Dourado / bronze
     gold-500 = uso decorativo (ícones, bordas, divisores) sobre claro — 3.16:1 (ok p/ elementos gráficos)
                também usado como texto sobre fundo escuro (hero/rodapé #020521) — 6.35:1 (AA)
     gold-600 = texto/botão sobre fundo claro — 5.2:1 sobre branco (AA texto normal) */
  --gold-50:  #FBF7EF;
  --gold-100: #F0E4C8;
  --gold-300: #D9BA84;
  --gold-500: #B4894F;   /* dourado/bronze decorativo (ícones, bordas) + texto sobre fundo escuro */
  --gold-600: #8C6537;   /* dourado/bronze para texto e botão sobre fundo claro (AA) */
  --gold-700: #6E4E29;   /* hover / estado ativo */

  /* Navy profundo */
  --navy-500: #35426A;
  --navy-700: #1E2A47;
  --navy-900: #131D33;   /* navy de texto/heading (títulos sobre fundo claro) */
  --navy-950: #0C1322;
  --ink-950:  #020521;   /* navy quase-preto — fundo do hero e do rodapé */

  /* Marfim / creme quente */
  --ivory-50:  #FDFBF7;
  --ivory-100: #F7F1E6;  /* fundo hero / seção institucional */
  --ivory-200: #EFE6D3;

  /* Neutros */
  --white:    #FFFFFF;
  --gray-400: #9CA3AF;
  --gray-500: #565C6C;   /* texto de corpo — 5.9:1 sobre ivory, 6.7:1 sobre branco (AA) */

  /* Tipografia */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;

  /* Escala tipográfica */
  --text-xs:   0.75rem;   /* 12px — eyebrow, rodapé fino */
  --text-sm:   0.875rem;  /* 14px — nav, labels */
  --text-base: 1rem;      /* 16px — corpo */
  --text-lg:   1.125rem;  /* 18px */
  --text-2xl:  1.5rem;    /* 24px — título de pilar */
  --text-4xl:  2.25rem;   /* 36px — título de seção */
  --text-6xl:  3.5rem;    /* 56px — título hero */

  /* Espaçamento base 4px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;   /* botões */
  --radius-lg: 28px;   /* moldura de foto */
  --radius-full: 9999px;

  /* ============ 2. SEMÂNTICOS ============ */
  --color-surface-base:     var(--white);   /* header, seção pilares */
  --color-surface-warm:     var(--ivory-100); /* seção institucional (sobre nós) */
  --color-surface-deep:     var(--ink-950);  /* hero e rodapé — fundo escuro premium */
  --color-surface-inverse:  var(--ink-950);  /* alias — mantido por compat. semântica com texto/borda inverse */

  --color-text-heading:      var(--navy-900);
  --color-text-body:         var(--gray-500);
  --color-text-inverse:      var(--ivory-50);
  --color-text-inverse-muted:#9AA1B8;

  --color-accent-decorative: var(--gold-500);  /* ícones, bordas, divisores — não usar em texto sobre fundo claro */
  --color-accent-on-light:   var(--gold-600);  /* texto/links/eyebrow sobre branco ou ivory */
  --color-accent-on-dark:    var(--gold-500);  /* texto/labels sobre navy (footer) */
  --color-accent-hover:      var(--gold-700);
  --color-accent-soft:       var(--gold-100);

  --color-border-subtle:  #E7E0CF;
  --color-border-inverse: rgba(255,255,255,0.14);

  /* ============ 3. COMPONENTES ============ */
  --button-primary-bg:     var(--gold-600);
  --button-primary-bg-hover: var(--gold-700);
  --button-primary-text:   var(--white);
  --button-primary-radius: var(--radius-md);

  --button-outline-border: var(--gold-500);
  --button-outline-text:   var(--navy-900);
  --button-outline-radius: var(--radius-md);

  --card-frame-radius: var(--radius-lg);
}