/* ==========================================================================
   ISG brand layer for IPSA — maps Impact Solution Group brand tokens
   (see BRAND.md) onto the Tabler UI. Loaded AFTER tabler + portal CSS so
   these rules win. Blue leads, cyan supports, gradient for emphasis.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;600;700;800&display=swap');

:root {
  /* Brand palette */
  --brand:        #0E63D6;
  --brand-dark:   #0A4AA8;
  --brand-darker: #073A85;
  --cloud:        #12B5D6;
  --cloud-deep:   #0E93AE;
  --grad:         linear-gradient(115deg, #0E63D6 12%, #12B5D6 92%);
  --grad-light:   linear-gradient(115deg, #8FD8FF, #6EE7DE);

  /* Neutrals */
  --ink:      #0B1B33;
  --muted:    #51617A;
  --line:     #E3EBF4;
  --bg:       #FFFFFF;
  --bg-tint:  #F3F8FC;
  --bg-dark:  #081A33;

  /* Type */
  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter",  system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radii */
  --radius:    18px;
  --radius-lg: 26px;

  /* --- Re-point Tabler's own tokens at the brand --- */
  --tblr-primary:        #0E63D6;
  --tblr-primary-rgb:    14, 99, 214;
  --tblr-primary-fg:     #FFFFFF;
  --tblr-link-color:     #0E63D6;
  --tblr-link-color-rgb: 14, 99, 214;
  --tblr-link-hover-color: #0A4AA8;
  --tblr-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tblr-body-color:     #0B1B33;
  --tblr-secondary:      #51617A;
  --tblr-border-color:   #E3EBF4;
  --tblr-border-radius:      12px;
  --tblr-border-radius-lg:   16px;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--bg-tint);
}

/* Display typeface for headings, nav, buttons, stats, labels */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand, .page-title, .card-title,
.btn, .nav-link-title, .datagrid-title {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
h1, h2, .h1, .h2, .page-title { font-weight: 700; letter-spacing: -0.02em; }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

/* Primary buttons — signature blue→cyan gradient */
.btn-primary {
  --tblr-btn-color: #fff;
  --tblr-btn-bg: var(--brand);
  --tblr-btn-border-color: var(--brand);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--brand-dark);
  --tblr-btn-hover-border-color: var(--brand-dark);
  --tblr-btn-active-bg: var(--brand-darker);
  --tblr-btn-active-border-color: var(--brand-darker);
  background-image: var(--grad);
  border: 0;
  box-shadow: 0 6px 16px -6px rgba(14, 99, 214, .45);
}
.btn-primary:hover,
.btn-primary:focus {
  background-image: linear-gradient(115deg, #0A4AA8 12%, #0E93AE 92%);
  box-shadow: 0 8px 20px -6px rgba(14, 99, 214, .55);
}
.btn-outline-primary {
  --tblr-btn-color: var(--brand);
  --tblr-btn-border-color: var(--brand);
  --tblr-btn-hover-bg: var(--brand);
  --tblr-btn-hover-border-color: var(--brand);
  --tblr-btn-active-bg: var(--brand);
}

/* Links / badges / active states that read from --tblr-primary already recolour. */
.text-primary { color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.badge.bg-primary { background-image: var(--grad); border: 0; }

/* Focus ring in brand blue */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(14, 99, 214, .20);
}
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

/* Dark top navigation bar in ISG deep navy */
header.navbar[data-bs-theme="dark"],
.navbar-dark {
  background-color: var(--bg-dark) !important;
}
header.navbar .navbar-nav .nav-link.active,
header.navbar .navbar-nav .nav-item.active .nav-link {
  color: #fff;
  box-shadow: inset 0 -2px 0 0 var(--cloud);
}

/* Cards: soft, low, brand-tinted lines */
.card {
  border-color: var(--line);
  border-radius: var(--tblr-border-radius-lg);
}

/* Eyebrow label — Outfit, uppercase, cyan, with a gradient tick */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  color: var(--cloud-deep);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.eyebrow::before {
  content: "";
  width: 1.25rem;
  height: 2px;
  border-radius: 999px;
  background-image: var(--grad);
}

/* Gradient headline text utility (use on white / --bg-tint only) */
.text-gradient {
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Pills */
.btn-pill, .rounded-pill { border-radius: 999px !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}