/* Finti color system — values sampled from the supplied logo files and live-platform screenshots. */
:root{
  /* Brand blue — the logo blue and the platform's primary action color */
  --finti-blue-50:#F1F6FE;
  --finti-blue-100:#DCE8FE;
  --finti-blue-200:#B9D0FC;
  --finti-blue-400:#5090F8;
  --finti-blue-500:#2B70F8;
  --finti-blue-600:#2060E0;
  --finti-blue-700:#1A54CC;
  --finti-blue-800:#1746A8;

  /* Ink — the charcoal of the wordmark, plus text ramp */
  --finti-charcoal:#212121;
  --ink-900:#1A1D21;
  --ink-700:#3F4650;
  --ink-500:#7A828E;
  --ink-400:#A8AFBA;

  /* Neutral surfaces */
  --white:#FFFFFF;
  --grey-25:#FAFBFC;
  --grey-50:#F5F5F7;
  --grey-100:#EFF1F4;
  --grey-200:#E4E7EC;
  --grey-300:#D0D5DD;
  --slate-300:#B0BAC9;

  /* Proposal tier accents (Good / Better / Best) */
  --violet-500:#7A3FE0;
  --violet-600:#6030C8;
  --violet-700:#4F27A8;
  --coral-500:#E8604E;
  --coral-600:#DE4A3A;
  --amber-400:#F8B820;
  --amber-500:#E5A50C;

  /* Semantic status */
  --green-500:#28B865;
  --green-50:#E6F7EE;
  --red-500:#E5484D;
  --red-50:#FDECEC;

  /* ---- Semantic aliases: use these in product UI ---- */
  --brand-primary:var(--finti-blue-500);
  --brand-primary-hover:var(--finti-blue-600);
  --brand-primary-active:var(--finti-blue-700);
  --brand-primary-soft:var(--finti-blue-50);
  --brand-ink:var(--finti-charcoal);

  --bg-app:var(--grey-50);
  --surface-card:var(--white);
  --surface-sunken:var(--grey-100);
  --surface-inset:var(--grey-25);

  --border-subtle:var(--grey-200);
  --border-strong:var(--grey-300);
  --border-brand:var(--finti-blue-500);

  --text-heading:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-link:var(--finti-blue-500);
  --text-on-brand:var(--white);

  --nav-bg:var(--finti-blue-500);
  --nav-item-active-bg:rgba(255,255,255,.18);
  --nav-item-hover-bg:rgba(255,255,255,.10);
  --nav-text:rgba(255,255,255,.86);
  --nav-text-active:var(--white);

  --status-approved:var(--green-500);
  --status-approved-bg:var(--green-50);
  --status-declined:var(--red-500);
  --status-declined-bg:var(--red-50);
  --status-pending:var(--amber-500);
  --chart-approved:var(--green-500);
  --chart-completed:var(--finti-blue-500);
  --chart-declined:var(--slate-300);

  --tier-good:var(--finti-blue-500);
  --tier-better:var(--violet-600);
  --tier-best:var(--coral-600);
  --tier-selected:var(--amber-400);

  --focus-ring:0 0 0 3px var(--finti-blue-100);

  /* Gradients — the only gradients in the system: nav rail and the three tier headers */
  --gradient-nav:linear-gradient(180deg,var(--finti-blue-500) 0%,var(--finti-blue-700) 100%);
  --gradient-tier-good:linear-gradient(135deg,var(--finti-blue-500) 0%,var(--finti-blue-700) 100%);
  --gradient-tier-better:linear-gradient(135deg,var(--violet-500) 0%,var(--violet-700) 100%);
  --gradient-tier-best:linear-gradient(135deg,var(--coral-500) 0%,var(--coral-600) 100%);
  --gradient-brand-hero:linear-gradient(120deg,var(--finti-blue-500) 0%,var(--finti-blue-400) 100%);
}