/* oa.flow — Color system
   Base palette from the brand book (Manual da Marca V1 · 2026).
   Backgrounds are WHITE or NAVY — never purple. There is no yellow and no pink
   in this system: the accent is brick red. Salmon exists only as a highlight
   INSIDE navy blocks. */
:root {
  /* ---- Navy ramp — the only dark base ---- */
  --oa-navy-deep: #0A0C1C;   /* Fundo escuro mais profundo (base de peça) */
  --oa-navy: #14182C;        /* Fundo escuro padrão */
  --oa-navy-800: #1E2236;    /* Blocos navy sobre fundo branco */
  --oa-navy-700: #20253B;    /* Superfície elevada / hover em card escuro */
  --oa-navy-600: #2B3150;    /* Hairline borders no escuro */

  /* ---- Brick red — THE accent (destaques, números, progresso, CTAs) ---- */
  --oa-brick: #9E2A24;       /* Palavra de impacto, eyebrow, barra de progresso */
  --oa-brick-bright: #B5322A;/* Números e percentuais em destaque */
  --oa-vinho: #8B2520;       /* Selos, tags e contexto sério (mais fechado) */

  /* ---- Salmon — highlight SOMENTE dentro de bloco navy ---- */
  --oa-salmon: #EC8A7E;      /* Palavra destacada sobre navy. Nunca sobre branco. */
  --oa-salmon-deep: #E0635A;

  /* ---- Neutrals — light side ---- */
  --oa-white: #FFFFFF;       /* Fundo claro principal */
  --oa-cream: #F4F1EA;       /* Cards e blocos sobre o branco */
  --oa-cream-border: #EAE5DA;/* Hairline no claro */
  --oa-offwhite: #F7F8FA;    /* Texto claro sobre navy */

  /* ---- Navy gradient (sutil — substitui o antigo gradiente roxo) ---- */
  --oa-grad-1: #1E2236;
  --oa-grad-2: #14182C;
  --oa-grad-3: #0A0C1C;
  --oa-gradient-signature: radial-gradient(120% 120% at 30% 20%, var(--oa-grad-1) 0%, var(--oa-grad-2) 45%, var(--oa-grad-3) 100%);

  /* ---- CTA gradient (brick pill) ---- */
  --oa-gradient-cta: linear-gradient(180deg, var(--oa-brick-bright) 0%, var(--oa-vinho) 100%);

  /* ====================================================
     Semantic aliases — prefer these in components
     ==================================================== */
  /* Fundos: escolha UM dos dois. */
  --bg-base: var(--oa-navy-deep);
  --bg-light: var(--oa-white);
  --bg-gradient: var(--oa-gradient-signature);

  /* Superfícies no escuro */
  --surface-card: var(--oa-navy);
  --surface-raised: var(--oa-navy-700);
  --border-hairline: var(--oa-navy-600);

  /* Superfícies no claro */
  --surface-cream: var(--oa-cream);
  --surface-navy-block: var(--oa-navy-800);
  --border-cream: var(--oa-cream-border);

  /* Texto sobre navy */
  --text-primary: var(--oa-offwhite);
  --text-secondary: color-mix(in srgb, var(--oa-offwhite) 70%, transparent);
  --text-muted: color-mix(in srgb, var(--oa-offwhite) 48%, transparent);

  /* Texto sobre branco/creme */
  --text-ink: var(--oa-navy-800);
  --text-ink-secondary: #4A4F63;
  --text-ink-muted: #8A90A6;

  /* Accent */
  --accent: var(--oa-brick);
  --accent-strong: var(--oa-vinho);
  --accent-bright: var(--oa-brick-bright);
  --accent-cta: var(--oa-gradient-cta);
  --text-on-accent: var(--oa-white);

  /* Highlight sobre navy (salmão) */
  --accent-on-dark: var(--oa-salmon);

  --editorial: var(--oa-vinho);
  --editorial-bright: var(--oa-brick-bright);

  /* ---- Compat: nomes antigos ---- */
  --oa-coral: var(--oa-salmon);
  --oa-coral-deep: var(--oa-salmon-deep);
  --text-on-coral: var(--oa-white);
  --highlight: var(--oa-brick-bright);
  --oa-vinho-bright: var(--oa-brick-bright);
}