/* GenGrid theme switch — palette from the logo kit README:
   Grid Navy #0F1D2E (main), Gen Amber #E8A200 (on light), Bright Amber #FFB81C (on dark),
   Slate #5A6878 (secondary), Paper #F3F5F8 (light backgrounds).
   Tailwind names (brand/accent/ink/sand, see tailwind.config.js) resolve to these RGB
   triplets. Two themes:
     - default "Amber"   = colour logo on light (kit: colour variant)
     - data-theme="navy" = reversed logo on dark  (kit: reversed variant) */
:root {
  --c-brand: 232 162 0;         /* Gen Amber — links, rings, primary CTAs */
  --c-brand-dark: 199 144 0;    /* hover */
  --c-brand-glow: 255 184 28;   /* Bright Amber — pop CTAs */
  --c-brand-soft: 250 241 222;  /* soft amber wash (pills, icon tiles) */
  --c-accent: 232 162 0;        /* Gen Amber */
  --c-accent-dark: 199 144 0;
  --c-accent-soft: 251 243 220;
  --c-ink: 15 29 46;            /* Grid Navy — dark blocks, headings */
  --c-ink-soft: 28 48 70;
  --c-sand: 243 245 248;        /* Paper — light section backgrounds */
}

html[data-theme="navy"] {
  --c-brand: 255 184 28;        /* Bright Amber — primary actions on navy */
  --c-brand-dark: 232 162 0;    /* hover: Gen Amber */
  --c-brand-glow: 232 162 0;
  --c-brand-soft: 46 63 88;     /* navy-tinted soft surfaces */
  --c-accent: 232 162 0;
  --c-accent-dark: 199 144 0;
  --c-accent-soft: 76 58 20;
  --c-ink: 243 245 248;         /* Paper — headings/text on dark */
  --c-ink-soft: 218 226 236;
  --c-sand: 20 33 54;           /* section backgrounds */
}

/* ---- logo lockups & icons: colour on light, reversed on navy ---- */
.logo-light, .icon-light { display: inline-block; }
.logo-dark, .icon-dark { display: none; }
html[data-theme="navy"] .logo-light, html[data-theme="navy"] .icon-light { display: none; }
html[data-theme="navy"] .logo-dark, html[data-theme="navy"] .icon-dark { display: inline-block; }

/* ================= dark "Grid Navy" surface overrides ================= */
html[data-theme="navy"] body { background-color: #0A1424; }
html[data-theme="navy"] body.bg-white { background-color: #0A1424; }
html[data-theme="navy"] .bg-white { background-color: rgb(22 38 59 / var(--tw-bg-opacity, 1)); }
html[data-theme="navy"] .bg-white\/60 { background-color: rgb(22 38 59 / .6); }
html[data-theme="navy"] .bg-white\/95 { background-color: rgb(15 29 46 / .95); }
html[data-theme="navy"] .bg-gray-50 { background-color: #16263B; }
html[data-theme="navy"] .bg-gray-100 { background-color: #1A2B42; }
html[data-theme="navy"] .bg-ink { background-color: rgb(8 18 30 / var(--tw-bg-opacity, 1)); }

/* text ramp: keep light-theme hierarchy (900 = most prominent) but readable on navy */
html[data-theme="navy"] .text-gray-900 { color: #F3F5F8; }
html[data-theme="navy"] .text-gray-800 { color: #E6EBF1; }
html[data-theme="navy"] .text-gray-700 { color: #CBD5E1; }
html[data-theme="navy"] .text-gray-600 { color: #AEBCCA; }
html[data-theme="navy"] .text-gray-500 { color: #93A2B6; }
html[data-theme="navy"] .text-gray-400 { color: #7C8CA2; }
html[data-theme="navy"] .text-gray-300 { color: #6A7A90; }
html[data-theme="navy"] .text-gray-200 { color: #55647A; }

/* borders/dividers */
html[data-theme="navy"] .border-gray-100 { border-color: rgba(243, 245, 248, 0.09); }
html[data-theme="navy"] .border-gray-200 { border-color: rgba(243, 245, 248, 0.14); }
html[data-theme="navy"] .ring-gray-200 { --tw-ring-color: rgba(243, 245, 248, 0.14); }
html[data-theme="navy"] .ring-gray-100 { --tw-ring-color: rgba(243, 245, 248, 0.09); }
html[data-theme="navy"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(243, 245, 248, 0.14); }
html[data-theme="navy"] .shadow-ink\/5 { --tw-shadow-color: rgb(2 6 12 / 0.45); }

/* CTA legibility: amber buttons keep Grid-Navy text in both themes (logo "Gen" rule) */
.bg-brand.text-white { color: #0F1D2E; }
.bg-accent.text-ink { color: #0F1D2E; }
.bg-brand-glow.text-ink { color: #0F1D2E; }
/* icon tiles / pills on soft-amber washes: navy glyphs stay legible */
.bg-brand-soft.text-brand, .bg-brand-soft\/60.text-brand { color: #0F1D2E; }

/* slate ramp (dark) — mirrors the gray-* overrides */
html[data-theme="navy"] .bg-slate-50 { background-color: #16263B; }
html[data-theme="navy"] .bg-slate-100 { background-color: #1A2B42; }
html[data-theme="navy"] .bg-slate-200 { background-color: #22344C; }
html[data-theme="navy"] .text-slate-700 { color: #CBD5E1; }
html[data-theme="navy"] .text-slate-600 { color: #AEBCCA; }
html[data-theme="navy"] .text-slate-500 { color: #93A2B6; }
html[data-theme="navy"] .text-slate-400 { color: #7C8CA2; }
html[data-theme="navy"] .ring-slate-200 { --tw-ring-color: rgba(243, 245, 248, 0.14); }
html[data-theme="navy"] .ring-slate-300 { --tw-ring-color: rgba(243, 245, 248, 0.2); }
html[data-theme="navy"] .border-slate-200 { border-color: rgba(243, 245, 248, 0.14); }

/* ================= contrast fixes (WCAG AA 4.5:1, audited 2026-10-09) ================= */
/* Gold TEXT: bright Gen Amber is only 2.2:1 on white, so link/label text uses a deep gold
   in light mode (5.5:1). Fills (buttons, rings, borders) keep the logo's Gen Amber. */
:root { --c-brand-text: 138 97 0; }                       /* #8A6100 */
html[data-theme="navy"] { --c-brand-text: 255 184 28; }   /* Bright Amber on navy (8.8:1+) */
.text-brand, .hover\:text-brand:hover, .group:hover .group-hover\:text-brand { color: rgb(var(--c-brand-text)); }
/* on navy panels inside the light theme, use the kit's on-dark amber */
.bg-ink .text-brand, .bg-ink .hover\:text-brand:hover, .bg-ink .group:hover .group-hover\:text-brand { color: #FFB81C; }
.bg-ink .text-brand-soft, html[data-theme="navy"] .text-brand-soft { color: #E9DFC6; }

/* light-mode muted text → kit "Slate" #5A6878 (5.2:1 on Paper) */
.text-gray-500, .text-slate-500 { color: #5A6878; }
.text-gray-400, .text-slate-400 { color: #64707F; }
/* ...but keep them soft-light where they sit on navy panels */
.bg-ink .text-gray-400, .bg-ink .text-slate-400 { color: #9AA8BA; }
.bg-ink .text-gray-500, .bg-ink .text-slate-500 { color: #B4C0CE; }

/* dark mode: gray-200/300/400 are used as light text on dark panels — keep them light */
html[data-theme="navy"] .text-gray-200 { color: #D1D5DB; }
html[data-theme="navy"] .text-gray-300, html[data-theme="navy"] .text-slate-300 { color: #B4C0CE; }
html[data-theme="navy"] .text-gray-400, html[data-theme="navy"] .text-slate-400 { color: #9AA8BA; }
html[data-theme="navy"] .text-gray-500, html[data-theme="navy"] .text-slate-500 { color: #9AA8BA; }

/* status colours (portal/admin/forms): AA in light, tinted chips in dark */
.text-green-600, .text-emerald-600 { color: #047857; }
.text-amber-600 { color: #B45309; }
html[data-theme="navy"] .bg-emerald-50, html[data-theme="navy"] .bg-emerald-100, html[data-theme="navy"] .bg-green-100 { background-color: rgba(16, 185, 129, 0.14); }
html[data-theme="navy"] .bg-red-50, html[data-theme="navy"] .bg-red-100, html[data-theme="navy"] .hover\:bg-red-50:hover { background-color: rgba(248, 113, 113, 0.13); }
html[data-theme="navy"] .bg-amber-50, html[data-theme="navy"] .bg-amber-100 { background-color: rgba(255, 184, 28, 0.13); }
html[data-theme="navy"] .bg-blue-50 { background-color: rgba(96, 165, 250, 0.13); }
html[data-theme="navy"] .text-emerald-600, html[data-theme="navy"] .text-emerald-700, html[data-theme="navy"] .text-emerald-800,
html[data-theme="navy"] .text-green-600, html[data-theme="navy"] .text-green-800 { color: #6EE7B7; }
html[data-theme="navy"] .text-red-600, html[data-theme="navy"] .text-red-700, html[data-theme="navy"] .text-red-800 { color: #FCA5A5; }
html[data-theme="navy"] .text-amber-600, html[data-theme="navy"] .text-amber-700, html[data-theme="navy"] .text-amber-800 { color: #FFB81C; }
html[data-theme="navy"] .text-blue-700 { color: #93C5FD; }
html[data-theme="navy"] .border-emerald-200 { border-color: rgba(110, 231, 183, 0.3); }
html[data-theme="navy"] .border-red-200, html[data-theme="navy"] .ring-red-200 { border-color: rgba(252, 165, 165, 0.3); --tw-ring-color: rgba(252, 165, 165, 0.3); }
html[data-theme="navy"] .border-amber-200, html[data-theme="navy"] .ring-amber-200, html[data-theme="navy"] .ring-amber-300 { border-color: rgba(255, 184, 28, 0.3); --tw-ring-color: rgba(255, 184, 28, 0.3); }
html[data-theme="navy"] .border-gray-300, html[data-theme="navy"] .border-slate-300 { border-color: rgba(243, 245, 248, 0.2); }
html[data-theme="navy"] .border-slate-100 { border-color: rgba(243, 245, 248, 0.08); }
html[data-theme="navy"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(243, 245, 248, 0.08); }
html[data-theme="navy"] .hover\:bg-gray-50:hover, html[data-theme="navy"] .hover\:bg-slate-50:hover { background-color: #1A2B42; }
html[data-theme="navy"] .hover\:bg-slate-200:hover { background-color: #22344C; }
html[data-theme="navy"] .bg-slate-300 { background-color: #2E3F58; }
html[data-theme="navy"] .hover\:bg-white:hover { background-color: #FFFFFF; }
html[data-theme="navy"] input, html[data-theme="navy"] textarea, html[data-theme="navy"] select { color: #F3F5F8; }
html[data-theme="navy"] .placeholder-gray-500::placeholder, html[data-theme="navy"] ::placeholder { color: #8E9CB0; }

/* ================= liquid glass (Voiceflow-inspired, low transparency) ================= */
/* Frosted, mostly opaque: ~90% fill keeps text crisp; blur shows only a hint of what's behind. */
.glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.88));
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 20px 44px -22px rgba(15, 29, 46, 0.18);
}
html[data-theme="navy"] .glass {
  background: linear-gradient(135deg, rgba(26, 43, 66, 0.94), rgba(18, 32, 50, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 20px 44px -22px rgba(0, 0, 0, 0.6);
}
/* dropdown menus: frosted glass, slightly more solid for readability */
.dd-panel.glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(250, 251, 252, 0.92));
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border-color: rgba(15, 29, 46, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 24px 48px -16px rgba(15, 29, 46, 0.25);
}
html[data-theme="navy"] .dd-panel.glass {
  background: linear-gradient(135deg, rgba(28, 46, 70, 0.96), rgba(18, 32, 50, 0.92));
  border-color: rgba(243, 245, 248, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 24px 48px -16px rgba(0, 0, 0, 0.65);
}
/* sticky header: frosted bar */
.glass-bar {
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
}
html[data-theme="navy"] .glass-bar { background-color: rgba(10, 20, 36, 0.9); }
/* the site's generic card pattern (guides, solutions, industries indices) */
.bg-white.ring-slate-200 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9));
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 36px -20px rgba(15, 29, 46, 0.14);
}
html[data-theme="navy"] .bg-white.ring-slate-200 {
  background: linear-gradient(135deg, rgba(26, 43, 66, 0.94), rgba(20, 35, 55, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 36px -20px rgba(0, 0, 0, 0.5);
}
/* premium cards: pricing / highlighted panels */
.bg-white.shadow-ink\/5 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9));
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
html[data-theme="navy"] .bg-white.shadow-ink\/5 {
  background: linear-gradient(135deg, rgba(26, 43, 66, 0.94), rgba(20, 35, 55, 0.88));
}
/* soft glow orbs for glass backdrops */
.orb {
  position: absolute; border-radius: 9999px; pointer-events: none;
  filter: blur(64px);
}
.orb-amber { background: rgba(232, 162, 0, 0.22); }
.orb-navy { background: rgba(15, 29, 46, 0.14); }
html[data-theme="navy"] .orb-amber { background: rgba(255, 184, 28, 0.16); }
html[data-theme="navy"] .orb-navy { background: rgba(59, 90, 130, 0.2); }