/* ZooPay theme tokens + the few global rules Tailwind utilities don't cover.
   Palette source of truth: assets/js/zoopay-theme.js (Tailwind CDN pages) and
   build/tailwind/tailwind.config.js (compiled admin CSS). */
:root {
    --zp-primary: #FF7A00;
    --zp-secondary: #FF9A1F;
    --zp-deep: #E85D04;
    --zp-strong: #CC4A00;      /* AA-safe orange for text on white / white text on orange */
    --zp-wash: #FFF4E8;
    --zp-navy: #111827;
    --zp-focus: #CC4A00;
    --zp-gradient: linear-gradient(135deg, #FF8A00 0%, #E85D04 55%, #C2410C 100%);
    --zp-gradient-hover: linear-gradient(135deg, #F57A00 0%, #D9520A 55%, #B93D0A 100%);
}

/* Primary buttons: orange gradient. Each panel styles its primary button with its own solid
   accent class (admin: bg-admin-600, agent: bg-indigo-600, merchant/logins: bg-blue-600,
   checkout: bg-brand-600 / bg-[#CC4A00]) - all already remapped to orange, so the gradient is
   layered on top as background-image and the solid colour stays as the fallback. Limited to
   button-like elements so badges, dots and progress bars sharing those classes stay flat. */
:is(button, a, label, input[type="submit"], input[type="button"], [role="button"]):is(
    .bg-admin-600, .bg-indigo-600, .bg-blue-600, .bg-brand-600, .bg-payu-blue, .bg-\[\#CC4A00\]
),
.btn-gradient {
    background-image: var(--zp-gradient);
    text-shadow: 0 1px 1px rgba(124, 45, 18, 0.35); /* keeps white text crisp on the lighter end */
}
:is(button, a, label, input[type="submit"], input[type="button"], [role="button"]):is(
    .bg-admin-600, .bg-indigo-600, .bg-blue-600, .bg-brand-600, .bg-payu-blue, .bg-\[\#CC4A00\]
):hover,
.btn-gradient:hover {
    background-image: var(--zp-gradient-hover);
}
/* Disabled buttons fall back to their own flat/disabled colour so they read as unavailable. */
:is(button, input):disabled:is(
    .bg-admin-600, .bg-indigo-600, .bg-blue-600, .bg-brand-600, .bg-payu-blue, .bg-\[\#CC4A00\], .btn-gradient
) {
    background-image: none;
    text-shadow: none;
}

/* Visible keyboard focus for controls that don't already style their own focus state
   (Tailwind's focus:outline-none / focus:ring-* utilities are more specific and still win). */
:focus-visible {
    outline: 2px solid var(--zp-focus);
    outline-offset: 2px;
}

::selection {
    background: #FFD0A0;
    color: var(--zp-navy);
}