/* ==========================================================================
   Inner-page theme layer
   Inner pages are built with Tailwind utility classes in many accent colours
   (blue, purple, green, red, orange...). This layer, scoped to <body class="inner">,
   maps them onto the site palette defined in site.css so every page reads as
   one design. Load after site.css.

   Two custom properties carry the context:
     --accent  brand colour readable on the current surface
     --muted   secondary text colour for the current surface
   Dark surfaces set them to the bright variants; light cards reset them.
   ========================================================================== */

body.inner {
    --accent: var(--brand-ink);
    --muted: var(--text-muted);
    color: var(--text);
    background: var(--surface);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}
body.inner section :where(h1, h2, h3) {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
body.inner section :where(h1) { letter-spacing: -0.03em; line-height: 1.08; }

/* ---------- Dark surfaces: every saturated or dark background becomes navy ---------- */

body.inner :is(
    .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900, .bg-indigo-600, .bg-indigo-700, .bg-indigo-800, .bg-indigo-900,
    .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-900, .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-violet-900,
    .bg-green-600, .bg-green-700, .bg-green-800, .bg-green-900, .bg-emerald-600, .bg-emerald-700, .bg-emerald-800, .bg-emerald-900,
    .bg-red-600, .bg-red-700, .bg-red-800, .bg-red-900, .bg-rose-600, .bg-rose-700, .bg-rose-800, .bg-rose-900,
    .bg-orange-600, .bg-orange-700, .bg-orange-800, .bg-orange-900, .bg-amber-600, .bg-amber-700, .bg-amber-800, .bg-amber-900,
    .bg-yellow-600, .bg-yellow-700, .bg-yellow-800, .bg-yellow-900, .bg-teal-600, .bg-teal-700, .bg-teal-800, .bg-teal-900,
    .bg-sky-600, .bg-sky-700, .bg-sky-800, .bg-sky-900, .bg-cyan-600, .bg-cyan-700, .bg-cyan-800, .bg-cyan-900,
    .bg-pink-600, .bg-pink-700, .bg-pink-800, .bg-pink-900, .bg-blue-500,
    .bg-gray-900, .bg-deep-charcoal, .bg-tech-black, .bg-deep-navy, .hero-gradient, .dark-ctx) {
    background-color: var(--ink-900);
    background-image: none;
    color: var(--text-on-dark);
    --accent: var(--brand);
    --muted: var(--text-on-dark-muted);
}
body.inner :is(.bg-gray-800, .bg-dark-gray) {
    color: var(--text-on-dark);
    background-color: var(--ink-800);
    --accent: var(--brand);
    --muted: var(--text-on-dark-muted);
}
/* Nested dark panels sit one step lighter than their section */
body.inner :is(section, div)[class*="bg-"] :is(.bg-purple-800, .bg-green-800, .bg-blue-800, .bg-indigo-800, .bg-red-800, .bg-gray-800) {
    background-color: var(--ink-800);
}

/* Hero sections: navy with a soft brand glow */
body.inner .hero-gradient {
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(198,255,0,.12) 0%, rgba(198,255,0,0) 55%),
        var(--ink-900);
    color: var(--text-on-dark);
}
body.inner.dark-ctx {
    background-color: var(--ink-900);
    color: var(--text-on-dark);
    --accent: var(--brand);
    --muted: var(--text-on-dark-muted);
}

/* Saturated gradients (cards, banners, illustrations) collapse to navy */
body.inner :is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b, .bg-gradient-to-l, .bg-gradient-to-tr, .bg-gradient-to-bl):is(
    [class*="from-blue-5"], [class*="from-blue-6"], [class*="from-blue-8"], [class*="from-blue-9"],
    [class*="from-purple-"], [class*="from-indigo-"], [class*="from-green-5"], [class*="from-green-6"],
    [class*="from-green-7"], [class*="from-green-9"], [class*="from-red-"], [class*="from-orange-"],
    [class*="from-pink-"], [class*="from-teal-"], [class*="from-cyan-"], [class*="from-sky-"],
    [class*="from-amber-"], [class*="from-yellow-5"], [class*="from-gray-6"]) {
    background-image: radial-gradient(90% 120% at 100% 0%, rgba(198,255,0,.14) 0%, rgba(198,255,0,0) 60%);
    background-color: var(--ink-900);
    --accent: var(--brand);
    --muted: var(--text-on-dark-muted);
}
/* Brand-coloured illustration panels (neon/gold or vendor-colour gradients) become a calm tint */
body.inner [class*="bg-gradient-to"]:is([class*="from-neon-green"], [class*="from-aws-orange"], [class*="from-brand-"]) {
    background-image: none;
    background-color: #F1F7E2;
    --accent: var(--brand-ink);
    --muted: var(--text-muted);
}

/* Light cards placed on dark sections go back to light-surface colours */
body.inner :is(.bg-white, .bg-gray-50, .bg-light-gray, .stat-card,
    .bg-blue-50, .bg-blue-100, .bg-purple-50, .bg-purple-100, .bg-green-50, .bg-green-100,
    .bg-red-50, .bg-red-100, .bg-orange-50, .bg-orange-100, .bg-indigo-50, .bg-indigo-100,
    .bg-yellow-50, .bg-yellow-100, .bg-teal-50, .bg-teal-100, .bg-pink-100, .bg-soft-green,
    .bg-sky-100, .bg-cyan-100, .bg-amber-100):not([class*="bg-opacity-"]) {
    --accent: var(--brand-ink);
    --muted: var(--text-muted);
}

/* ---------- Accent text ---------- */

body.inner :is(
    .text-blue-300, .text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800,
    .text-purple-400, .text-purple-500, .text-purple-600, .text-purple-700, .text-purple-800,
    .text-indigo-400, .text-indigo-500, .text-indigo-600, .text-indigo-700,
    .text-green-400, .text-green-500, .text-green-600, .text-green-700, .text-green-800,
    .text-red-400, .text-red-500, .text-red-600, .text-red-700,
    .text-orange-400, .text-orange-500, .text-orange-600, .text-orange-700,
    .text-teal-500, .text-teal-600, .text-pink-500, .text-pink-600,
    .text-sky-600, .text-sky-800, .text-cyan-500, .text-cyan-600, .text-cyan-800, .text-amber-600, .text-amber-800,
    .text-yellow-300, .text-yellow-400, .text-yellow-500, .text-yellow-600,
    .text-neon-green, .text-brand-green, .text-brand-orange) {
    color: var(--accent);
}
body.inner :is(.hover\:text-blue-300, .hover\:text-blue-600, .hover\:text-blue-800, .hover\:text-neon-green,
    .hover\:text-purple-600, .hover\:text-green-600, .hover\:text-sky-600, .hover\:text-cyan-700):hover {
    color: var(--accent);
}

/* Pale tints that sat on coloured bands */
body.inner :is(.text-blue-100, .text-blue-200, .text-purple-100, .text-purple-200, .text-green-100, .text-green-200,
    .text-red-100, .text-red-200, .text-indigo-100, .text-indigo-200, .text-orange-100, .text-orange-200,
    .text-sky-100, .text-cyan-100, .text-amber-100, .text-yellow-100) {
    color: var(--muted);
}

/* ---------- Tinted backgrounds (icon circles, callouts) ---------- */

body.inner :is(.bg-blue-50, .bg-blue-100, .bg-purple-50, .bg-purple-100, .bg-green-50, .bg-green-100,
    .bg-red-50, .bg-red-100, .bg-orange-50, .bg-orange-100, .bg-indigo-50, .bg-indigo-100,
    .bg-yellow-50, .bg-yellow-100, .bg-teal-50, .bg-teal-100, .bg-pink-100, .bg-soft-green,
    .bg-sky-100, .bg-cyan-100, .bg-amber-100) {
    background-color: #F1F7E2;
}
body.inner :is(.bg-gray-50, .bg-light-gray) { background-color: var(--surface-alt); }

/* Translucent white chips on dark bands */
body.inner .bg-white\/20 { background-color: rgba(255,255,255,.08); }

/* ---------- Borders ---------- */

body.inner :is(.border-blue-500, .border-blue-600, .border-purple-500, .border-purple-600, .border-green-500, .border-green-600,
    .border-red-500, .border-red-600, .border-orange-500, .border-orange-600, .border-indigo-500, .border-indigo-600,
    .border-yellow-400, .border-yellow-500) {
    border-color: var(--accent);
}
body.inner :is(.bg-white, .bg-gray-50) .border-neon-green { border-color: #CFE3A6; }

/* ---------- Buttons ---------- */

body.inner :is(.btn-primary, .bg-yellow-400, .bg-yellow-500, .brand-orange, .bg-brand-orange, .bg-brand-green, .bg-neon-green) {
    background: var(--brand);
    color: var(--ink-900);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}
body.inner :is(.btn-primary, .brand-orange, .hover\:bg-yellow-300, .hover\:bg-yellow-500):hover {
    background: var(--brand-hover);
    color: var(--ink-900);
    transform: none;
    box-shadow: none;
}
body.inner .btn-secondary {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    transform: none;
}
body.inner .btn-secondary:hover { background: rgba(127,127,127,.08); color: inherit; transform: none; }

/* Solid coloured buttons: navy (via the dark-surface rule), slightly lighter on hover */
body.inner :is(.hover\:bg-blue-700, .hover\:bg-blue-800, .hover\:bg-purple-700, .hover\:bg-green-700, .hover\:bg-red-700,
    .hover\:bg-orange-700, .hover\:bg-indigo-700, .hover\:bg-sky-700, .hover\:bg-cyan-700, .hover\:bg-amber-700,
    .hover\:bg-yellow-700, .hover\:bg-teal-700):hover {
    background-color: var(--ink-700);
}
/* White buttons keep dark text, whatever accent class they carried */
body.inner :is(a, button).bg-white { color: var(--ink-900); }

/* ---------- Cards ---------- */

body.inner section :is(.shadow-md, .shadow-lg, .shadow-xl).bg-white {
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
body.inner section :is(.shadow-md, .shadow-lg, .shadow-xl).bg-white:hover { box-shadow: var(--shadow-md); }
body.inner :is(.service-card, .hover-lift):hover { transform: none !important; }

/* ---------- Page-specific custom colour names ----------
   Older pages reference colours from a retired palette (charcoal, medium-gray,
   deep-navy) or vendor colours (aws-orange, fed-blue) that were never defined
   on every page. Define them all here against the site palette. */

body.inner :is(.text-charcoal, .text-deep-navy) { color: var(--text); }
body.inner :is(.dark-ctx, .bg-gray-900, .bg-deep-charcoal, .bg-deep-navy, .hero-gradient) :is(.text-charcoal, .text-deep-navy) { color: var(--text-on-dark); }
body.inner .text-medium-gray { color: var(--muted); }
body.inner :is(.text-aws-orange, .text-fed-blue) { color: var(--accent); }
body.inner :is(.border-aws-orange, .border-fed-blue) { border-color: var(--accent); }
body.inner :is(.bg-aws-orange, .bg-fed-blue, .bg-fed-red) { background-color: var(--brand); color: var(--ink-900); }
body.inner :is(.hover\:bg-aws-orange, .hover\:bg-fed-blue):hover { background-color: var(--accent); color: var(--ink-900); }

/* ---------- Error pages (404 / 500) ---------- */

body.inner .error-main {
    min-height: 70vh; display: flex; align-items: center; justify-content: center;
    padding: 96px 0;
}

/* Content must never depend on a scroll script to become visible. Several pages
   hid .fade-in content until a scroll handler revealed it; when that script
   failed, or cards were injected later, the content stayed invisible. */
body.inner .fade-in { opacity: 1; transform: none; }

/* Animated attention-grabbers are no longer used */
body.inner :is(.chat-pulse, .phone-bounce) { animation: none; }

@media (prefers-reduced-motion: reduce) {
    body.inner * { transition: none !important; animation: none !important; }
}