/* ============================================================
   PNP — MARCA VALÉRIA CARREIRO · "a maturidade que floresce"
   Sobrescreve os tokens do Compradores DS com a paleta de
   outono brasileiro e a tipografia da marca (DM Serif Display +
   Manrope + Cormorant Garamond). Carregar DEPOIS dos tokens do DS
   e DEPOIS do CSS da página.
   Paleta: Laranja Queimado #C0532A · Terracota #A8472A ·
   Bordô #6B2A1F · Ocre Dourado #D9923A · Caramelo #E8B87E ·
   Verde Musgo #5C5A2E · Areia #EDE4D3 · Creme #F7F1E6
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* ---- Tipografia ---- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Manrope", system-ui, sans-serif;
  --font-display: "DM Serif Display", Georgia, serif;
  --font-heading: "DM Serif Display", Georgia, serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-ui: "Manrope", system-ui, sans-serif;
  --font-figure: "Manrope", system-ui, sans-serif;
  --font-editorial: "Cormorant Garamond", Georgia, serif;

  /* ---- Cores nomeadas (outono) ---- */
  --azul:      #3A1A12;  /* tinta escura / superfícies escuras (bordô-marrom) */
  --deep-blue: #4A2218;
  --cinza:     #4A2E22;  /* corpo de texto (marrom) */
  --off-white: #E0D2BC;
  --branco:    #FBF7EF;  /* branco quente */
  --marrom:    #D9923A;  /* ocre dourado — acento */
  --bege:      #E8C9A0;

  /* ---- Escala "navy" reaproveitada como marrom-escuro/quente ---- */
  --navy-950: #1B0D07;
  --navy-900: #23110B;   /* fundo escuro principal (barras, hero) */
  --navy-800: #2E160E;
  --navy-700: #3A1C12;
  --navy-600: #4A2418;
  --navy-500: #5C3020;
  --navy-400: #7A4530;
  --navy-300: #A07457;
  --navy-200: #C9A98C;
  --navy-100: #E4D2C0;
  --navy-50:  #F2E8DD;

  /* ---- Escala dourado / terracota (acentos) ---- */
  --marrom-50:  #F6E9D6;
  --marrom-100: #F0DBC0;
  --marrom-200: #E8C9A0;
  --marrom-300: #E8B87E;  /* caramelo */
  --marrom-400: #E0A452;
  --marrom-500: #D9923A;  /* ocre dourado — acento principal */
  --marrom-600: #C0532A;  /* laranja queimado */
  --marrom-700: #A8472A;  /* terracota */
  --marrom-800: #6B2A1F;  /* bordô especiaria */
  --marrom-900: #4A1E16;

  /* ---- Escala areia / creme ---- */
  --sand-50:  #FBF7EF;
  --sand-100: #F7F1E6;   /* creme — canvas */
  --sand-200: #EDE4D3;   /* areia */
  --sand-300: #E0D2BC;
  --sand-400: #CDB99C;
  --sand-500: #A8906E;
  --sand-600: #7E5A48;   /* texto secundário (marrom) */
  --sand-700: #5A4032;
  --sand-800: #3E2A20;
  --sand-900: #2A1B13;

  --white: #FFFFFF;

  /* ---- Semânticos (verde musgo da marca p/ sucesso) ---- */
  --success-700: #5C5A2E;
  --success-500: #6E6C38;
  --success-100: #E9E7CF;
  --warning-700: #A8472A;
  --warning-500: #C0532A;
  --warning-100: #F3E2CC;
  --danger-700:  #8A2E1F;
  --danger-500:  #A94B3B;
  --danger-100:  #F0DED8;

  /* ---- Aliases de superfície / texto ---- */
  --bg-page:        var(--branco);
  --bg-canvas:      var(--sand-100);
  --surface-card:   #FFFFFF;
  --surface-dark:   var(--navy-900);
  --surface-dark-2: var(--navy-700);
  --surface-inverse:var(--navy-900);

  --text-strong:    #6B2A1F;   /* bordô */
  --text-heading:   #6B2A1F;
  --text-body:      var(--cinza);
  --text-secondary: var(--sand-600);
  --text-muted:     var(--sand-500);
  --text-on-navy:   var(--branco);
  --text-on-marrom: var(--azul);
  --text-accent:    var(--marrom-700);
  --text-link:      var(--marrom-700);

  --border-subtle:  rgba(107,42,31,.14);
  --border-default: rgba(107,42,31,.2);
  --border-strong:  rgba(107,42,31,.32);
  --border-accent:  var(--marrom-500);
  --border-on-dark: rgba(232,184,126,.24);

  --brand:       var(--marrom-500);
  --brand-hover: var(--marrom-600);
  --brand-press: var(--marrom-700);

  /* Ação primária = terracota; acento = ocre dourado */
  --action-primary-bg:    var(--marrom-700);
  --action-primary-hover: var(--marrom-800);
  --action-primary-press: var(--marrom-900);
  --action-primary-text:  var(--branco);
  --action-accent-bg:     var(--marrom-500);
  --action-accent-hover:  var(--marrom-600);
  --action-accent-press:  var(--marrom-700);
  --action-accent-text:   var(--azul);

  --focus-ring: color-mix(in oklch, var(--marrom-600) 45%, transparent);
}

/* títulos com a serifada da marca */
.pnp-h1, .pnp-hello, .pnp-onb-h1, .doc-h, .doc-title { font-family: var(--font-display); font-weight: 400; }

/* água continua azul (único acento frio, legível como "água") */
.pnp-cup .fill { background: linear-gradient(180deg, #86B2CB, #3E6E8C) !important; }
.pnp-cup.on { border-color: #3E6E8C; }