/**
 * variables.css
 * Design tokens do Dome Group — Dark Premium / Minimalista / Corporativo.
 * Nenhum valor de cor, espaçamento ou tipografia deve ser escrito
 * diretamente em outro arquivo CSS: sempre referenciar uma variável daqui.
 */

:root {
  /* ---------- Cor — Base ---------- */
  /* Extraídas por amostragem de pixel dos arquivos de logo (Dome.png / Logos_Digital.png) */
  --color-bg:            #050F26; /* fundo principal — azul-marinho profundo, igual ao fundo dos logos */
  --color-bg-alt:        #0A1730; /* fundo alternado de seções */
  --color-surface:       #0E1D3B; /* cards, painéis */
  --color-surface-hover: #142445; /* hover de cards/painéis */

  /* ---------- Cor — Azul ---------- */
  --color-blue-700:      #0F2A52;
  --color-blue-600:      #17356B;
  --color-blue-500:      #1F4680;

  /* ---------- Cor — Dourado (destaque/CTA) ---------- */
  --color-gold:          #E4B24A;
  --color-gold-light:    #F4C97C;
  --color-gold-dark:     #B98A2E;

  /* ---------- Cor — Neutros ---------- */
  --color-white:         #F7F7F5;
  --color-white-pure:    #FFFFFF;
  --color-text-muted:    #9AA3B8;
  --color-text-subtle:   #838CAA; /* ajustado de #6B7488 (4.06:1) para atingir 4.5:1+ em texto pequeno (WCAG AA) */
  --color-border:        rgba(247, 247, 245, 0.08);
  --color-border-strong: rgba(247, 247, 245, 0.16);
  --color-gold-border:   rgba(228, 178, 74, 0.35);

  /* ---------- Gradientes ---------- */
  --gradient-hero: radial-gradient(120% 120% at 50% 0%, #0C1B3A 0%, #050F26 55%, #030A1A 100%);
  --gradient-gold: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold), var(--color-gold-light));
  --gradient-divider: linear-gradient(90deg, transparent, var(--color-gold), transparent);

  /* ---------- Tipografia ---------- */
  /* Playfair Display: mesma família serifada do wordmark "DOME" / "LOGOS" nos logos oficiais.
     Montserrat: sans com letter-spacing largo, igual ao usado em "STUDIO" / "DIGITAL" e nas taglines. */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body:    'Montserrat', 'Segoe UI', sans-serif;

  --fs-xs:   0.8125rem;  /* 13px */
  --fs-sm:   0.9375rem;  /* 15px */
  --fs-base: 1rem;       /* 16px */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   1.375rem;   /* 22px */
  --fs-2xl:  1.75rem;    /* 28px */
  --fs-3xl:  2.25rem;    /* 36px */
  --fs-4xl:  3rem;       /* 48px */
  --fs-5xl:  4rem;       /* 64px */
  --fs-6xl:  5.25rem;    /* 84px */

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-normal: 1.6;

  --ls-tight: -0.02em;
  --ls-wide:  0.08em;
  --ls-widest: 0.18em;

  /* ---------- 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-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- Transições ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;

  /* ---------- Sombra ---------- */
  --shadow-soft: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-gold-glow: 0 0 40px -10px rgba(198, 161, 91, 0.25);
}