/* ── Brand marks ─────────────────────────────────────────────────────────────
   Sampled pixel-exact from assets/logo/interpay-mark.png. The mark is two
   overlapping diagonal capsules; each capsule has a light, mid and deep facet. */
:root{
  --ip-mark-blue-light:#63bbe7;
  --ip-mark-blue:#3d86c2;
  --ip-mark-blue-deep:#205fa5;
  --ip-mark-red:#e0424d;
  --ip-mark-red-mid:#c03f3a;
  --ip-mark-red-deep:#923b1f;
  --ip-wordmark-blue:#17519c;   /* "inter" */
  --ip-wordmark-red:#e0424d;    /* "pay"   */

  /* ── Primary blue scale (product accent) ─────────────────────────────────
     500 = "Bright Blue" #2d7ff9 from the Web Kit board.
     600 = the deeper royal blue used for onboarding CTAs.
     700 = the wordmark blue. */
  --ip-blue-50:#ebf1ff;
  --ip-blue-100:#d6e4ff;
  --ip-blue-200:#adc8ff;
  --ip-blue-300:#7ba4fb;
  --ip-blue-400:#4a8bfa;
  --ip-blue-500:#2d7ff9;
  --ip-blue-600:#1d4ed8;
  --ip-blue-700:#17519c;
  --ip-blue-800:#123c78;

  /* Sky blue — the identity board's "Sky Blue" primary accent (#4da5e6). Used for
     illustration, gradients and chart secondaries, not for CTAs. */
  --ip-sky-300:#8fc7ef;
  --ip-sky-500:#4da5e6;
  --ip-sky-600:#3d86c2;

  /* ── Red scale (secondary accent) ────────────────────────────────────── */
  --ip-red-50:#fee9e6;
  --ip-red-100:#fdd5d0;
  --ip-red-300:#f08a80;
  --ip-red-500:#e94b41;
  --ip-red-600:#e0424d;
  --ip-red-700:#c03f3a;
  --ip-red-800:#923b1f;

  /* ── Neutrals ────────────────────────────────────────────────────────── */
  --ip-white:#ffffff;
  --ip-mist:#f7f8fa;        /* Mist White — page background */
  --ip-neutral-100:#f3f4f6; /* Light Gray */
  --ip-neutral-200:#e5e7eb;
  --ip-neutral-300:#d9d8de; /* Cool Light Gray */
  --ip-neutral-400:#9ca3af;
  --ip-neutral-500:#6b7380; /* Steel Gray */
  --ip-neutral-600:#585b5e; /* Graphite Gray */
  --ip-neutral-700:#1f2937; /* Navy 700 */
  --ip-neutral-800:#111827; /* Navy 800 */
  --ip-neutral-900:#0b1420; /* Deep Navy */
  --ip-charcoal:#2e3136;    /* Charcoal — deep neutral for print/dark panels */

  /* ── Semantic status ─────────────────────────────────────────────────── */
  --ip-success-50:#e7f7f1;
  --ip-success-500:#0f9d6e;
  --ip-success-700:#0b7a56;
  --ip-warning-50:#fef4e6;
  --ip-warning-500:#d98a0b;
  --ip-warning-700:#a86a06;
  --ip-info-50:#ebf1ff;
  --ip-info-500:#2d7ff9;
  --ip-danger-50:#fee9e6;
  --ip-danger-500:#e94b41;
  --ip-danger-700:#c03f3a;

  /* ── Semantic aliases — use these in product code ────────────────────── */
  --text-strong:var(--ip-neutral-900);
  --text-body:var(--ip-neutral-700);
  --text-muted:var(--ip-neutral-500);
  --text-subtle:var(--ip-neutral-400);
  --text-inverse:var(--ip-white);
  --text-accent:var(--ip-blue-600);
  --text-link:var(--ip-blue-600);
  --text-link-hover:var(--ip-blue-700);
  --text-link-visited:var(--ip-blue-800);
  --text-danger:var(--ip-danger-500);

  --surface-page:var(--ip-mist);
  --surface-card:var(--ip-white);
  --surface-raised:var(--ip-white);
  --surface-sunken:var(--ip-neutral-100);
  --surface-accent-soft:var(--ip-blue-50);
  --surface-danger-soft:var(--ip-red-50);
  --surface-dark:var(--ip-neutral-900);
  --surface-dark-alt:var(--ip-charcoal);

  --border-subtle:var(--ip-neutral-200);
  --border-default:var(--ip-neutral-300);
  --border-strong:var(--ip-neutral-400);
  --border-accent:var(--ip-blue-500);
  --border-dark:rgba(255,255,255,.14);

  --action-primary:var(--ip-blue-600);
  --action-primary-hover:var(--ip-blue-700);
  --action-primary-active:var(--ip-blue-800);
  --action-primary-soft:var(--ip-blue-50);
  --action-danger:var(--ip-danger-500);
  --action-danger-hover:var(--ip-danger-700);
  --focus-ring:rgba(45,127,249,.28);

  --chart-1:var(--ip-blue-500);
  --chart-2:var(--ip-red-500);
  --chart-3:var(--ip-neutral-900);
  --chart-4:var(--ip-sky-500);
  --chart-5:var(--ip-neutral-300);

  /* ── Brand gradients ─────────────────────────────────────────────────── */
  --ip-gradient-energy:linear-gradient(90deg,var(--ip-blue-600) 0%,var(--ip-blue-500) 35%,var(--ip-red-500) 100%); /* @kind other */
  --ip-gradient-mark:linear-gradient(135deg,var(--ip-mark-blue-light) 0%,var(--ip-mark-blue-deep) 45%,var(--ip-mark-red) 100%); /* @kind other */
  --ip-gradient-dark:linear-gradient(135deg,#0b1420 0%,#16223a 55%,#2e3136 100%); /* @kind other */
  --ip-gradient-protect:linear-gradient(180deg,rgba(11,20,32,0) 0%,rgba(11,20,32,.72) 100%); /* @kind other */
}