/* ============================================================
   GRUPO FÊNIX — Design Tokens
   Colors + Typography foundations
   Brand: orange phoenix, deep navy, royal indigo, cream.
   ============================================================ */

/* Fonts — loaded from Google Fonts CDN.
   NOTE: the FÊNIX wordmark uses a custom/proprietary display face.
   We approximate it with Archivo (Expanded, heavy weights). Swap in
   the real brand font when provided. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&family=Archivo+Expanded:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --fenix-orange:        #FD7119; /* primary accent — the phoenix */
  --fenix-orange-600:    #E5610E; /* hover / pressed orange */
  --fenix-orange-300:    #FFA866; /* soft orange (tints, on-dark fills) */
  --fenix-orange-100:    #FFE7D4; /* orange wash */

  --fenix-navy:          #011B36; /* primary ink, dark canvas */
  --fenix-navy-800:      #0A2348; /* raised dark surface */
  --fenix-navy-700:      #16315C; /* dark border / hairline on navy */

  --fenix-blue:          #303880; /* royal indigo — secondary brand */
  --fenix-blue-600:      #272E6B; /* indigo pressed */
  --fenix-blue-300:      #8A8FC4; /* indigo tint */
  --fenix-blue-100:      #E5E6F2; /* indigo wash */

  --fenix-cream:         #F6E9E0; /* warm light surface / on-dark text */
  --fenix-cream-soft:    #FBF4EE; /* lightest warm tint */

  /* ---------- NEUTRALS (cool, navy-biased) ---------- */
  --gray-50:   #F7F8FA;
  --gray-100:  #EDEFF3;
  --gray-200:  #DEE2EA;
  --gray-300:  #C7CDD9;
  --gray-400:  #9AA3B5;
  --gray-500:  #6B7488;
  --gray-600:  #4C5468;
  --gray-700:  #333B4D;
  --gray-800:  #1E2538;
  --gray-900:  #0E1626;

  /* ---------- SEMANTIC (data / status) ---------- */
  --positive:      #1F9D6B; /* revenue up, gains */
  --positive-bg:   #E4F4EC;
  --negative:      #D8453B; /* losses, down */
  --negative-bg:   #FBE7E5;
  --warning:       #E0922B; /* attention */
  --warning-bg:    #FBF0DE;
  --info:          #303880; /* uses brand indigo */
  --info-bg:       #E5E6F2;

  /* ---------- DATA-VIZ CHANNELS (affiliate revenue streams) ---------- */
  --ch-direct:     #FD7119; /* Direto / CPA */
  --ch-tauk:       #303880; /* Tauk */
  --ch-salesbound: #1F9D6B; /* Salesbound */
  --ch-sms:        #8A5BD6; /* SMS */
  --ch-email:      #2C9CC4; /* Email */

  /* ---------- SURFACES (light dashboard) ---------- */
  --bg-app:        var(--gray-50);
  --bg-surface:    #FFFFFF;
  --bg-raised:     #FFFFFF;
  --bg-sunken:     var(--gray-100);
  --bg-dark:       var(--fenix-navy);

  /* ---------- TEXT ---------- */
  --fg-1: var(--fenix-navy);   /* primary text */
  --fg-2: var(--gray-600);     /* secondary text */
  --fg-3: var(--gray-500);     /* tertiary / captions */
  --fg-4: var(--gray-400);     /* disabled / placeholder */
  --fg-on-dark:   var(--fenix-cream);
  --fg-on-accent: #FFFFFF;

  /* ---------- BORDERS ---------- */
  --border-1: var(--gray-200); /* default hairline */
  --border-2: var(--gray-300); /* stronger divider */
  --border-focus: var(--fenix-orange);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --font-sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --font-num: var(--font-mono);   /* JetBrains Mono — a voz única dos números do dashboard */

  /* Type scale (1.25 major-third-ish, dashboard-tuned) */
  --text-display: 800 44px/1.04 var(--font-display);
  --text-h1:      800 32px/1.1  var(--font-display);
  --text-h2:      700 24px/1.16 var(--font-sans);
  --text-h3:      700 19px/1.2  var(--font-sans);
  --text-h4:      600 16px/1.25 var(--font-sans);
  --text-body:    400 15px/1.5  var(--font-sans);
  --text-body-sm: 400 13px/1.45 var(--font-sans);
  --text-label:   600 12px/1.2  var(--font-sans);
  --text-caption: 500 11px/1.3  var(--font-sans);
  --text-kpi:     800 34px/1.0  var(--font-sans);
  --text-mono-sm: 500 13px/1.4  var(--font-mono);

  --tracking-eyebrow: 0.14em; /* GRUPO-style overline tracking */
  --tracking-tight: -0.01em;

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* ---------- ELEVATION ---------- */
  --shadow-sm: 0 1px 2px rgba(1,27,54,0.06), 0 1px 3px rgba(1,27,54,0.05);
  --shadow-md: 0 2px 4px rgba(1,27,54,0.06), 0 6px 16px rgba(1,27,54,0.08);
  --shadow-lg: 0 8px 24px rgba(1,27,54,0.12), 0 2px 6px rgba(1,27,54,0.08);
  --shadow-focus: 0 0 0 3px rgba(253,113,25,0.28);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

/* ---------- SEMANTIC ELEMENT DEFAULTS ---------- */
.fenix-eyebrow {
  font: var(--text-label);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fenix-orange);
}
.fenix-h1 { font: var(--text-h1); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.fenix-h2 { font: var(--text-h2); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.fenix-h3 { font: var(--text-h3); color: var(--fg-1); }
.fenix-body { font: var(--text-body); color: var(--fg-2); }
/* GOTCHA: um `font:` shorthand no style inline VENCE esta classe. Elemento com `font:` no style
   deve usar var(--font-num) no próprio shorthand OU repetir fontFamily+fontVariantNumeric em
   longhand DEPOIS do shorthand (padrão ae.tdNum/el.tdNum). Convenção: manter TAMBÉM a classe
   fenix-num no elemento (marcador de grep + fallback). */
.fenix-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }