/* GenGrid theme switch — palette from the logo kit README:
   Grid Navy #1B1F4B (main), Gen Amber #0088CC (on light), Bright Amber #38C6FF (on dark),
   Slate #56597B (secondary), Paper #F3F4FA (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: 0 136 204;         /* Gen Amber — links, rings, primary CTAs */
  --c-brand-dark: 0 116 173;    /* hover */
  --c-brand-glow: 56 198 255;   /* Bright Amber — pop CTAs */
  --c-brand-soft: 218 239 249;  /* soft amber wash (pills, icon tiles) */
  --c-accent: 0 136 204;        /* Gen Amber */
  --c-accent-dark: 0 116 173;
  --c-accent-soft: 216 239 251;
  --c-ink: 27 31 75;            /* Grid Navy — dark blocks, headings */
  --c-ink-soft: 40 44 92;
  --c-sand: 243 244 250;        /* Paper — light section backgrounds */
}

html[data-theme="navy"] {
  --c-brand: 56 198 255;        /* Bright Amber — primary actions on navy */
  --c-brand-dark: 0 136 204;    /* hover: Gen Amber */
  --c-brand-glow: 0 136 204;
  --c-brand-soft: 58 62 106;     /* navy-tinted soft surfaces */
  --c-accent: 0 136 204;
  --c-accent-dark: 0 116 173;
  --c-accent-soft: 18 51 68;
  --c-ink: 243 244 250;         /* Paper — headings/text on dark */
  --c-ink-soft: 213 217 241;
  --c-sand: 31 35 78;           /* 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: #14173F; }
html[data-theme="navy"] body.bg-white { background-color: #14173F; }
html[data-theme="navy"] .bg-white { background-color: rgb(33 37 82 / var(--tw-bg-opacity, 1)); }
html[data-theme="navy"] .bg-white\/60 { background-color: rgb(33 37 82 / .6); }
html[data-theme="navy"] .bg-white\/95 { background-color: rgb(27 31 75 / .95); }
html[data-theme="navy"] .bg-gray-50 { background-color: #212552; }
html[data-theme="navy"] .bg-gray-100 { background-color: #262A58; }
html[data-theme="navy"] .bg-ink { background-color: rgb(18 21 58 / 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: #F3F4FA; }
html[data-theme="navy"] .text-gray-800 { color: #E3E5F4; }
html[data-theme="navy"] .text-gray-700 { color: #D0D1E3; }
html[data-theme="navy"] .text-gray-600 { color: #B5B7CD; }
html[data-theme="navy"] .text-gray-500 { color: #9D9FBB; }
html[data-theme="navy"] .text-gray-400 { color: #888BA8; }
html[data-theme="navy"] .text-gray-300 { color: #777998; }
html[data-theme="navy"] .text-gray-200 { color: #616487; }

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

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

/* slate ramp (dark) — mirrors the gray-* overrides */
html[data-theme="navy"] .bg-slate-50 { background-color: #212552; }
html[data-theme="navy"] .bg-slate-100 { background-color: #262A58; }
html[data-theme="navy"] .bg-slate-200 { background-color: #2E3260; }
html[data-theme="navy"] .text-slate-700 { color: #D0D1E3; }
html[data-theme="navy"] .text-slate-600 { color: #B5B7CD; }
html[data-theme="navy"] .text-slate-500 { color: #9D9FBB; }
html[data-theme="navy"] .text-slate-400 { color: #888BA8; }
html[data-theme="navy"] .ring-slate-200 { --tw-ring-color: rgba(243, 244, 250, 0.14); }
html[data-theme="navy"] .ring-slate-300 { --tw-ring-color: rgba(243, 244, 250, 0.2); }
html[data-theme="navy"] .border-slate-200 { border-color: rgba(243, 244, 250, 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: 0 82 123; }                       /* #00527B */
html[data-theme="navy"] { --c-brand-text: 56 198 255; }   /* 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: #38C6FF; }
.bg-ink .text-brand-soft, html[data-theme="navy"] .text-brand-soft { color: #C0DAE7; }

/* light-mode muted text → kit "Slate" #56597B (5.2:1 on Paper) */
.text-gray-500, .text-slate-500 { color: #56597B; }
.text-gray-400, .text-slate-400 { color: #6F718B; }
/* ...but keep them soft-light where they sit on navy panels */
.bg-ink .text-gray-400, .bg-ink .text-slate-400 { color: #A3A5BE; }
.bg-ink .text-gray-500, .bg-ink .text-slate-500 { color: #BBBDD1; }

/* 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: #D5D6DE; }
html[data-theme="navy"] .text-gray-300, html[data-theme="navy"] .text-slate-300 { color: #BBBDD1; }
html[data-theme="navy"] .text-gray-400, html[data-theme="navy"] .text-slate-400 { color: #A3A5BE; }
html[data-theme="navy"] .text-gray-500, html[data-theme="navy"] .text-slate-500 { color: #A3A5BE; }

/* 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(56, 198, 255, 0.13); }
html[data-theme="navy"] .bg-blue-50 { background-color: rgba(114, 125, 245, 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: #38C6FF; }
html[data-theme="navy"] .text-blue-700 { color: #9FA7FA; }
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(56, 198, 255, 0.3); --tw-ring-color: rgba(56, 198, 255, 0.3); }
html[data-theme="navy"] .border-gray-300, html[data-theme="navy"] .border-slate-300 { border-color: rgba(243, 244, 250, 0.2); }
html[data-theme="navy"] .border-slate-100 { border-color: rgba(243, 244, 250, 0.08); }
html[data-theme="navy"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(243, 244, 250, 0.08); }
html[data-theme="navy"] .hover\:bg-gray-50:hover, html[data-theme="navy"] .hover\:bg-slate-50:hover { background-color: #262A58; }
html[data-theme="navy"] .hover\:bg-slate-200:hover { background-color: #2E3260; }
html[data-theme="navy"] .bg-slate-300 { background-color: #3A3E6A; }
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: #F3F4FA; }
html[data-theme="navy"] .placeholder-gray-500::placeholder, html[data-theme="navy"] ::placeholder { color: #989BB5; }

/* ================= 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(27, 31, 75, 0.18);
}
html[data-theme="navy"] .glass {
  background: linear-gradient(135deg, rgba(38, 42, 88, 0.94), rgba(29, 33, 74, 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(249, 250, 253, 0.92));
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border-color: rgba(27, 31, 75, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 24px 48px -16px rgba(27, 31, 75, 0.25);
}
html[data-theme="navy"] .dd-panel.glass {
  background: linear-gradient(135deg, rgba(40, 44, 92, 0.96), rgba(29, 33, 74, 0.92));
  border-color: rgba(243, 244, 250, 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(20, 23, 63, 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(27, 31, 75, 0.14);
}
html[data-theme="navy"] .bg-white.ring-slate-200 {
  background: linear-gradient(135deg, rgba(38, 42, 88, 0.94), rgba(31, 35, 79, 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(38, 42, 88, 0.94), rgba(31, 35, 79, 0.88));
}
/* soft glow orbs for glass backdrops */
.orb {
  position: absolute; border-radius: 9999px; pointer-events: none;
  filter: blur(64px);
}
.orb-amber { background: rgba(0, 136, 204, 0.22); }
.orb-navy { background: rgba(27, 31, 75, 0.14); }
html[data-theme="navy"] .orb-amber { background: rgba(56, 198, 255, 0.16); }
html[data-theme="navy"] .orb-navy { background: rgba(70, 76, 145, 0.2); }