:root {

  /* ─── Tipografia ─────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ─── Fundos — progressão entre páginas ─────────────────── */
  /* Paleta violeta profunda do brief — ligeiramente escurecida no hero, final inalterado */
  --color-bg-deepest: #0d0b25;  /* Home (tom inicial) */
  --color-bg-deeper:  #0a081d;  /* Services (tom inicial) */
  --color-bg-base:    #080717;  /* Portfolio (tom inicial) / base geral */
  --color-bg-void:    #070612;  /* Contact (fixo) / CTA final — inalterado */

  /* ─── Superfícies ────────────────────────────────────────── */
  --color-surface-1:    rgba(255, 255, 255, .04);
  --color-surface-2:    rgba(255, 255, 255, .07);
  --color-surface-3:    rgba(255, 255, 255, .11);
  --color-surface-gold: rgba(var(--color-gold-400-rgb), .08);  /* base do novo dourado-âmbar */

  /* ─── Dourado-âmbar ──────────────────────────────────────── */
  /* Tom puxado para o laranja, mais quente — harmoniza com o azul profundo do bg.
     gold-400 (#d89a45) tem contraste ~7.9:1 sobre #0b0e1a → AAA para texto. */
  --color-gold-100: #fbe9c4;  /* Texto claro sobre fundo dourado */
  --color-gold-200: #f2d398;  /* Eyebrow, labels */
  --color-gold-300: #e5b56e;  /* Hover de ícones, topo do gradiente */
  --color-gold-400: #d89a45;  /* Primário — botões, ícones, links */
  --color-gold-500: #b2762a;  /* Active state */
  --color-gold-600: #8a5715;  /* Texto dentro do botão sólido */

  /* Componentes RGB do dourado — para usar dentro de rgba() em glows, sombras
     e bordas com opacidade variável. Centraliza o tom: ajustar aqui propaga
     para todos os brilhos. Mantê-los em sincronia com os hex acima. */
  --color-gold-100-rgb: 251, 233, 196;  /* = gold-100 (#fbe9c4) */
  --color-gold-400-rgb: 216, 154, 69;   /* = gold-400 (#d89a45) */
  --color-gold-600-rgb: 138, 87, 21;    /* = gold-600 (#8a5715) */

  /* ─── Texto sobre dourado — cor escura para contraste nos botões primários ─ */
  --color-text-on-gold: #0b0e1a;

  /* ─── Texto — tom violeta, harmoniza com o fundo escuro-violeta ─ */
  --color-text-primary:   #f0eeff;  /* Corpo e headlines — toque violeta, não branco puro */
  --color-text-secondary: #b8b0d8;  /* Parágrafos secundários */
  --color-text-muted:     #948cc0;  /* Labels, metadados, placeholders — mínimo AA (~5.4:1) */
  --color-text-accent:    #d89a45;  /* Links, destaques dourados */

  /* ─── Bordas ─────────────────────────────────────────────── */
  --color-border-subtle:      rgba(255, 255, 255, .08);
  --color-border-default:     rgba(255, 255, 255, .15);
  --color-border-gold:        rgba(var(--color-gold-400-rgb), .3);
  --color-border-gold-strong: rgba(var(--color-gold-400-rgb), .7);

  /* ─── Layout ─────────────────────────────────────────────── */
  --container-max:     1440px;
  --container-padding: clamp(24px, 4vw, 32px);

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

  /* ─── Header ─────────────────────────────────────────────── */
  --header-height: 72px;

}