/* ============================================================
   FonoKompass · Design Tokens
   Fonte de verdade para cor, tipografia, espaçamento, raios,
   movimento e sombras. Não duplique valores — sempre referencie
   variáveis daqui.
   ============================================================ */

:root {
  /* === CORES OFICIAIS DA MARCA === */
  --color-navy:   #0f1e36;
  --color-gold:   #d4af37;
  --color-cream:  #f1efea;

  /* === VARIAÇÕES (estados, profundidades) === */
  --color-navy-deeper:  #0a1426;
  --color-navy-lighter: #1a2c4a;
  --color-navy-soft:    #243960;

  --color-gold-darker:  #b8962e;
  --color-gold-lighter: #e0c25a;
  --color-gold-pale:    #f5ecd0;

  --color-cream-shade: #e8e5dd;
  --color-cream-deep:  #d8d3c5;

  /* === TEXTO SOBRE NAVY === */
  --text-on-navy-primary:   var(--color-cream);
  --text-on-navy-secondary: rgba(241, 239, 234, 0.72);
  --text-on-navy-muted:     rgba(241, 239, 234, 0.48);
  --text-on-navy-accent:    var(--color-gold);

  /* === TEXTO SOBRE CREAM === */
  --text-on-cream-primary:   var(--color-navy);
  --text-on-cream-secondary: rgba(15, 30, 54, 0.72);
  --text-on-cream-muted:     rgba(15, 30, 54, 0.52);
  --text-on-cream-accent:    var(--color-gold-darker);

  /* === TIPOGRAFIA === */
  --font-display: 'Museo', 'Bitter', Georgia, serif;
  --font-body:    'Museo Sans', 'Nunito Sans', -apple-system, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* === ESPAÇAMENTO (escala 4/8) === */
  --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:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;
  --space-13: 10rem;

  /* === RAIOS === */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* === MOVIMENTO === */
  --duration-fast:    160ms;
  --duration-base:    240ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --duration-glacial: 1200ms;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-compass:   cubic-bezier(0.22, 1.2, 0.36, 1);

  /* === SOMBRAS === */
  --shadow-sm: 0 1px 2px rgba(10, 20, 38, 0.06), 0 1px 3px rgba(10, 20, 38, 0.04);
  --shadow-md: 0 2px 8px rgba(10, 20, 38, 0.08), 0 4px 16px rgba(10, 20, 38, 0.04);
  --shadow-lg: 0 8px 24px rgba(10, 20, 38, 0.12), 0 16px 48px rgba(10, 20, 38, 0.08);

  /* === LAYOUT === */
  --container-max:    1200px;
  --container-pad:    var(--space-5);
  --header-height:    72px;
  --section-padding:  var(--space-12);

  /* === Z-INDEX === */
  --z-header:   50;
  --z-overlay:  90;
  --z-modal:    100;
}

@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-7);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad: var(--space-10);
  }
}