/* ============================================================================
   brand-chrome.css — sitewide brand unification for internal (app-layout) pages
   Remaps the legacy Tailwind sky-*/yellow-* chrome to the exact Pishkhanak brand
   palette so header / footer / sidebar / service pages match the redesigned
   homepage. Build-free: loaded after portal.css in front.layouts.app only, so it
   never touches the home-brand layout. Selectors are prefixed with `body` to beat
   Tailwind utility specificity (0,1,0) without !important; hover/group variants
   carry their own escaped selectors.
   ---------------------------------------------------------------------------- */

:root {
  --b-brand: #36A9E2;   /* primary brand */
  --b-deep:  #1e8bc3;   /* deeper brand */
  --b-dark:  #0f6ea6;   /* dark brand ink-blue */
  --b-ink:   #0c3f5a;   /* darkest text ink */
  --b-tint:  #eaf6fd;   /* lightest wash */
  --b-tint2: #dceffb;   /* light wash */
  --b-line:  #cfe9fa;   /* hairline / border tint */
  --b-line2: #9bd7f2;   /* mid border */
  --b-acc:   #ffc82c;   /* accent yellow */
  --b-acc2:  #ffb020;   /* accent yellow deep */
  --b-acctx: #d98b06;   /* accent yellow, readable as text */
}

/* ---- TEXT ---------------------------------------------------------------- */
body .text-sky-900 { color: var(--b-ink); }
body .text-sky-700 { color: var(--b-dark); }
body .text-sky-600 { color: var(--b-deep); }
body .text-sky-500 { color: var(--b-brand); }
body .text-sky-400 { color: var(--b-brand); }
body .text-yellow-600 { color: var(--b-acctx); }
body .text-yellow-500 { color: var(--b-acctx); }

/* ---- BACKGROUNDS -------------------------------------------------------- */
body .bg-sky-50  { background-color: var(--b-tint); }
body .bg-sky-100 { background-color: var(--b-tint2); }
body .bg-sky-200 { background-color: var(--b-line); }
body .bg-sky-500 { background-color: var(--b-brand); }
body .bg-sky-600 { background-color: var(--b-deep); }
body .bg-sky-700 { background-color: var(--b-dark); }
body .bg-yellow-400 { background-color: var(--b-acc); }

/* ---- BORDERS ------------------------------------------------------------ */
body .border-sky-100 { border-color: var(--b-tint2); }
body .border-sky-300 { border-color: var(--b-line2); }
body .border-sky-400 { border-color: var(--b-brand); }
body .border-sky-500 { border-color: var(--b-deep); }

/* ---- RINGS / FOCUS ------------------------------------------------------ */
body .ring-sky-100 { --tw-ring-color: var(--b-line); }
body .ring-sky-400 { --tw-ring-color: var(--b-brand); }
body .ring-sky-500 { --tw-ring-color: var(--b-deep); }
body .focus\:ring-sky-400:focus { --tw-ring-color: var(--b-brand); }
body .focus\:border-sky-400:focus { border-color: var(--b-brand); }

/* ---- GRADIENTS ---------------------------------------------------------- */
body .from-sky-50 { --tw-gradient-from: var(--b-tint) var(--tw-gradient-from-position); }
body .from-sky-500 { --tw-gradient-from: var(--b-brand) var(--tw-gradient-from-position); }
body .to-sky-500 { --tw-gradient-to: var(--b-brand) var(--tw-gradient-to-position); }
/* keep the page-shell wash inside the brand blue family (was sky-50 → indigo-50) */
body .from-indigo-50 { --tw-gradient-from: #f4fbff var(--tw-gradient-from-position); }
body .to-indigo-50 { --tw-gradient-to: #f4fbff var(--tw-gradient-to-position); }

/* ---- INTERACTIVE (hover / group / active) ------------------------------- */
body .hover\:bg-yellow-400:hover,
body .group-\[\.active\]\:bg-yellow-400.active,
body .group.active .group-\[\.active\]\:bg-yellow-400 { background-color: var(--b-acc); }
body .hover\:bg-sky-50:hover  { background-color: var(--b-tint); }
body .hover\:bg-sky-100:hover { background-color: var(--b-tint2); }
body .hover\:text-yellow-500:hover { color: var(--b-acctx); }
body .hover\:text-sky-900:hover { color: var(--b-ink); }
body .group:hover .group-hover\:text-yellow-500 { color: var(--b-acctx); }
body .group:hover .group-hover\:bg-yellow-400 { background-color: var(--b-acc); }