/* ============================================================
   tokens.css — Adriana Falcone v4
   Paleta: AZUL PROFUNDO PETRÓLEO (briefing literal)
           + COBRE quente (acento)
           + CREAM (bg respirado)
           + INK (texto)
   ============================================================ */

:root {
  /* ===== AZUL PROFUNDO PETRÓLEO — brand principal (Radix 12 steps) ===== */
  --petrol-1:  #F0F4F7;
  --petrol-2:  #DCE5EB;
  --petrol-3:  #BACBD6;
  --petrol-4:  #98B0BF;
  --petrol-5:  #7595A8;
  --petrol-6:  #547B91;
  --petrol-7:  #36647C;
  --petrol-8:  #234E66;
  --petrol-9:  #1F3A4D;   /* solid brand — azul profundo confiança e seriedade */
  --petrol-10: #18304A;
  --petrol-11: #102538;
  --petrol-12: #081726;

  /* ===== COBRE (acento dourado-quente) ===== */
  --copper-1:  #FBF7ED;
  --copper-2:  #F4EAD3;
  --copper-3:  #E9D5A8;
  --copper-4:  #DDC079;
  --copper-5:  #CFAA56;
  --copper-6:  #B89544;
  --copper-7:  #9C7E3A;
  --copper-8:  #80692F;
  --copper-9:  #B89544;   /* solid */
  --copper-10: #95762D;
  --copper-11: #5E4A1B;
  --copper-12: #322710;

  /* ===== CREAM/CLAY (bg respiráveis) ===== */
  --cream:     #FBF7ED;
  --cream-2:   #F5EFE0;
  --cream-3:   #EFE7D2;
  --paper:     #FFFDF8;

  /* ===== INK (verde-azulado profundo) ===== */
  --ink:       #14202B;
  --ink-2:     #2E3F4C;
  --ink-3:     #4A5C6A;
  --mute:      #5F6E78;
  --mute-2:    #98A4AC;

  /* ===== Brand mark logo (cor original vermelha) ===== */
  --brand-mark: #A8121A;

  /* ===== Semantics ===== */
  --bg:           var(--cream);
  --bg-elev:      var(--cream-2);
  --bg-elev-2:    var(--cream-3);
  --bg-paper:     var(--paper);
  --fg:           var(--ink);
  --fg-display:   var(--petrol-12);
  --fg-muted:     var(--ink-3);
  --fg-faint:     var(--mute);
  --accent:       var(--petrol-9);
  --accent-strong: var(--petrol-11);
  --accent-soft:  var(--petrol-3);
  --accent-deep:  var(--petrol-12);
  --rule:         #E0D7C3;
  --rule-soft:    #EDE5D2;

  /* ===== Tipografia (apenas 2 famílias) ===== */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-xxl: clamp(2.4rem, 0.8rem + 4.2vw, 4.5rem);
  --fs-xl:  clamp(1.75rem, 0.7rem + 2.4vw, 2.75rem);
  --fs-lg:  clamp(1.4rem, 0.9rem + 1.6vw, 2rem);
  --fs-md:  clamp(1.2rem, 0.9rem + 0.9vw, 1.45rem);
  --fs-body:clamp(1rem, 0.92rem + 0.35vw, 1.125rem);
  --fs-sm:  clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem);
  --fs-xs:  clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem);

  /* ===== Espaçamento ===== */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;

  --section-y: clamp(64px, 8vw, 120px);
  --gutter:    clamp(20px, 5vw, 56px);
  --measure:   62ch;

  --container:        1180px;
  --container-narrow: 880px;
  --container-wide:   1320px;

  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-full: 999px;

  /* ===== Sombras (warm tones, ink-base) ===== */
  --sh-1:  0 1px 2px rgba(20, 32, 43, 0.05);
  --sh-2:  0 4px 14px rgba(20, 32, 43, 0.07), 0 1px 3px rgba(20, 32, 43, 0.04);
  --sh-card:
    0 1px 2px rgba(20, 32, 43, 0.05),
    0 4px 12px rgba(20, 32, 43, 0.06),
    0 12px 32px -6px rgba(20, 32, 43, 0.10);
  --sh-card-hover:
    0 2px 4px rgba(20, 32, 43, 0.06),
    0 8px 24px rgba(20, 32, 43, 0.10),
    0 24px 48px -8px rgba(20, 32, 43, 0.14);
  --sh-hero:
    0 30px 80px -20px rgba(20, 32, 43, 0.22),
    0 8px 24px -6px rgba(20, 32, 43, 0.12);
  --ring-focus: 0 0 0 3px rgba(31, 58, 77, 0.40);

  --ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-fast:      240ms;
  --dur-base:      480ms;
  --dur-slow:      880ms;
  --dur-cinematic: 1400ms;

  --noise-opacity: 0.04;
  --header-h:      72px;
  --z-nav:         60;
  --z-cta:         80;
  --z-progress:    100;
  --z-grain:       999;
}

@media (max-width: 720px) {
  :root { --header-h: 60px; }
}