/* === DeliveryTag brand typography (Geist) ===
   Variable font, single file, weights 100–900, self-hosted. */
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Geist-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* === DeliveryTag tokens === */
:root {
  --dt-navy: #0A1629;
  --dt-font-display: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dt-font-body: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Apply Geist across all utility-class entry points used by the site.
   Overrides the inline Tailwind config (Space Grotesk / Inter / DM Sans). */
html, body { font-family: var(--dt-font-body) !important; }
.font-body, .font-sans, .body { font-family: var(--dt-font-body) !important; }
.font-headline, .font-label, .font-display, .headline, .font-dm {
  font-family: var(--dt-font-display) !important;
  letter-spacing: -0.01em;
}
.font-mono, .mono, code, pre, kbd, samp { font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--dt-font-display) !important; }
/* Catch any element that was inline-styled to a non-Geist face */
[style*="DM Sans"], [style*="Space Grotesk"], [style*="Inter"] {
  font-family: var(--dt-font-display) !important;
}

/* Standardize all navy-blue surfaces to brand navy.
   Targets Tailwind utility classes used across the site. */
.bg-slate-900,
.bg-slate-950,
.bg-gray-900,
.bg-gray-950,
.bg-zinc-900,
.bg-neutral-900,
.bg-stone-900 { background-color: var(--dt-navy) !important; }

.border-slate-900,
.border-slate-950,
.border-gray-900 { border-color: var(--dt-navy) !important; }

/* Tailwind opacity-modifier variants (e.g. bg-slate-900/80, /90) */
[class*="bg-slate-900\/"],
[class*="bg-slate-950\/"],
[class*="bg-gray-900\/"] { background-color: var(--dt-navy) !important; }

/* === Lime accent token + contrast pair === */
:root { --dt-lime: #B3F85E; --dt-lime-soft: #D4FB8E; --dt-lime-pale: #F2FFE3; }

/* === Sitewide readability rules ===
   Brand lime as TEXT only reads on dark navy. On white/light surfaces it
   fails contrast. Default lime-text utility classes to navy; restore lime
   only when an ancestor surface is dark navy. */

/* Light-shade emerald text (50–400): lighter lime — only legible on dark bg */
.text-emerald-50,.text-emerald-100,.text-emerald-200,
.text-emerald-300,.text-emerald-400 { color: var(--dt-lime-soft) !important; }

/* Dark-shade emerald text (500–900): default navy (used as labels on light fills).
   In dark mode, the page bg is navy too → flip to lime so the label still reads. */
.text-emerald-500,.text-emerald-600,
.text-emerald-700,.text-emerald-800,.text-emerald-900 { color: var(--dt-navy) !important; }
html.dark .text-emerald-500,
html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .text-emerald-800,
html.dark .text-emerald-900 { color: var(--dt-lime) !important; }

/* Brand-token text utilities default to NAVY (light mode). Dark mode → lime. */
.text-primary,
.text-accent,
.text-primary-fixed-dim,
.text-primary-container { color: var(--dt-navy) !important; }
html.dark .text-primary,
html.dark .text-accent,
html.dark .text-primary-fixed-dim,
html.dark .text-primary-container { color: var(--dt-lime) !important; }

/* Dark-surface ancestors restore the lime text — covers Tailwind utility
   classes, arbitrary-value classes (bg-[#0A1629]), inline styles, and
   common always-dark wrappers (.dt-nav-navy, hero video header, .bg-black).
   This makes .text-accent / .text-primary stay lime when on a dark surface
   regardless of the user's light/dark theme. */
.bg-slate-900 .text-primary,
.bg-slate-900 .text-accent,
.bg-slate-950 .text-primary,
.bg-slate-950 .text-accent,
.bg-gray-900 .text-primary,
.bg-gray-900 .text-accent,
.bg-gray-950 .text-primary,
.bg-gray-950 .text-accent,
.bg-zinc-900 .text-primary,
.bg-zinc-900 .text-accent,
.bg-neutral-900 .text-primary,
.bg-neutral-900 .text-accent,
.bg-stone-900 .text-primary,
.bg-stone-900 .text-accent,
.dt-nav-navy .text-accent,
.dt-nav-navy .text-primary,
[class*="bg-slate-9"] .text-primary,
[class*="bg-slate-9"] .text-accent,
[class*="bg-gray-9"] .text-primary,
[class*="bg-gray-9"] .text-accent,
[class*="bg-zinc-9"] .text-primary,
[class*="bg-zinc-9"] .text-accent,
[class~="bg-[#0A1629]"] .text-primary,
[class~="bg-[#0A1629]"] .text-accent,
[class~="bg-[#0a1629]"] .text-primary,
[class~="bg-[#0a1629]"] .text-accent,
[class~="bg-[#0B172B]"] .text-primary,
[class~="bg-[#0B172B]"] .text-accent,
[class~="bg-[#0F172A]"] .text-primary,
[class~="bg-[#0F172A]"] .text-accent,
[style*="background:#0A1629"] .text-primary,
[style*="background:#0A1629"] .text-accent,
[style*="background-color:#0A1629"] .text-primary,
[style*="background-color:#0A1629"] .text-accent,
[style*="background:#0a1629"] .text-primary,
[style*="background:#0a1629"] .text-accent,
[style*="background:#0B172B"] .text-primary,
[style*="background:#0B172B"] .text-accent,
[style*="background:#0F172A"] .text-primary,
[style*="background:#0F172A"] .text-accent,
.bg-black .text-primary,
.bg-black .text-accent,
header video ~ * .text-accent,
section[class*="bg-black"] .text-accent { color: var(--dt-lime) !important; }

/* Same logic for footer (always dark navy on every page) */
footer .text-accent,
footer .text-primary,
footer .text-emerald-300,
footer .text-emerald-400,
footer .text-emerald-500,
footer .text-emerald-600 { color: var(--dt-lime) !important; }

/* Hero <header> with a <video> background — accent text needs to stay lime */
header:has(video) .text-accent,
header:has(video) .text-primary { color: var(--dt-lime) !important; }

/* === Sitewide audit fixes (Pass 2) === */

/* Slate-400 / slate-300 on dark navy fails WCAG AA at 2.39:1.
   Bump light mode to slate-600, dark mode to slate-300/200 (readable on navy). */
html:not(.dark) .text-slate-400 { color: #475569 !important; }
html:not(.dark) .text-slate-300 { color: #64748B !important; }
html.dark .text-slate-400 { color: #CBD5E1 !important; }
html.dark .text-slate-300 { color: #E2E8F0 !important; }
html.dark .text-slate-500 { color: #94A3B8 !important; }
html.dark .text-slate-600 { color: #94A3B8 !important; }
html.dark .text-slate-700 { color: #CBD5E1 !important; }

/* `text-on-surface` resolves to navy in inline Tailwind config — fails on dark surface */
html.dark .text-on-surface,
html.dark .text-on-background,
html.dark .text-on-surface-variant { color: #E2E8F0 !important; }

/* Lime accent text inside a lime-bg container reads as invisible.
   Force navy when `.text-accent` / `.text-primary` is descendant of lime bg. */
.bg-accent .text-accent,
.bg-accent .text-primary,
.bg-primary .text-accent,
.bg-primary .text-primary,
.bg-primary-container .text-accent,
.bg-primary-container .text-primary,
[style*="background:#B3F85E"] .text-accent,
[style*="background:#B3F85E"] .text-primary,
[style*="background-color:#B3F85E"] .text-accent { color: var(--dt-navy) !important; }

/* Decorative SVG/material-symbols inside lime fills */
.bg-accent .material-symbols-outlined,
.bg-primary .material-symbols-outlined,
.bg-primary-container .material-symbols-outlined { color: var(--dt-navy) !important; }
.bg-emerald-50,.bg-emerald-100,.bg-emerald-200 { background-color: var(--dt-lime-pale) !important; }
/* In dark mode, pale-lime pills are invisible — flip to a translucent lime tint over navy */
html.dark .bg-emerald-50,
html.dark .bg-emerald-100,
html.dark .bg-emerald-200 { background-color: rgba(179, 248, 94, 0.12) !important; border-color: rgba(179, 248, 94, 0.3) !important; }
.bg-emerald-300,.bg-emerald-400 { background-color: var(--dt-lime-soft) !important; }
.bg-emerald-500,.bg-emerald-600,.bg-emerald-700,
.bg-emerald-800,.bg-emerald-900 { background-color: var(--dt-lime) !important; }
.border-emerald-300,.border-emerald-400,.border-emerald-500,
.border-emerald-600,.border-emerald-700 { border-color: var(--dt-lime) !important; }
.hover\:text-emerald-300:hover,.hover\:text-emerald-400:hover,
.hover\:text-emerald-500:hover,.hover\:text-emerald-600:hover { color: var(--dt-lime) !important; }
.hover\:bg-emerald-500:hover,.hover\:bg-emerald-600:hover,
.hover\:bg-emerald-700:hover { background-color: var(--dt-lime-soft) !important; }

/* Lime backgrounds need NAVY text (white-on-lime fails contrast).
   Force navy on every entry-point that lands on a lime surface. */
.bg-accent,
.bg-primary,
.bg-primary-container,
.bg-primary-fixed,
.bg-primary-fixed-dim { color: var(--dt-navy) !important; }
.text-on-primary,
.text-on-primary-container,
.text-on-primary-fixed,
.text-on-primary-fixed-variant { color: var(--dt-navy) !important; }
/* Catch chained-class CTAs (`bg-primary text-white` on the same element) */
.bg-primary.text-white,
.bg-accent.text-white,
.bg-primary-container.text-white,
.bg-primary-fixed.text-white,
[class~="bg-primary"][class~="text-white"],
[class~="bg-accent"][class~="text-white"] { color: var(--dt-navy) !important; }
/* Tailwind emerald-bg + text-white CTAs — also need navy text since emerald-500/600 → lime via our remap */
[class*="bg-emerald-5"][class*="text-white"],
[class*="bg-emerald-6"][class*="text-white"],
[class*="bg-emerald-7"][class*="text-white"],
.bg-emerald-500.text-white,
.bg-emerald-600.text-white,
.bg-emerald-700.text-white,
.hover\:bg-emerald-500.text-white,
.hover\:bg-emerald-600.text-white { color: var(--dt-navy) !important; }
/* Material-Symbols icons inside lime fills also need to be navy, not white */
.bg-primary .material-symbols-outlined.text-white,
.bg-primary-container .material-symbols-outlined.text-white,
.bg-accent .material-symbols-outlined.text-white { color: var(--dt-navy) !important; }
.bg-accent .text-white,
.bg-primary .text-white,
.bg-primary-container .text-white,
.bg-accent.text-white,
.bg-primary.text-white,
.bg-primary-container.text-white,
a.bg-accent,
a.bg-primary,
a.bg-primary-container,
button.bg-accent,
button.bg-primary,
button.bg-primary-container { color: var(--dt-navy) !important; }
/* Hover-darken lime CTAs (preserves visual feedback) */
.bg-accent:hover,
.bg-primary:hover,
.bg-primary-container:hover,
.hover\:bg-primary-container:hover { background-color: var(--dt-lime-soft) !important; }

/* === Universal dark-mode shim ===
   Targets the most common Tailwind utilities used across DeliveryTag pages.
   Pages that already declare proper dark: variants in their own classes
   are unaffected (Tailwind's variants take precedence; these rules use
   moderate specificity, no !important except where unavoidable). */

/* Global mobile overflow fix */
html, body { overflow-x: hidden; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; height: auto; }
pre, code, table { overflow-x: auto; max-width: 100%; }
@media (max-width: 768px) {
  .hidden.md\:flex, .hidden.lg\:flex { display: none !important; }
  nav .hidden { display: none !important; }
  .max-w-\[1440px\], .max-w-screen-2xl { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
}

html.dark{color-scheme:dark}
html.dark body{background-color:#0A1629;color:#e2e8f0}

/* Surfaces — light → dark */
html.dark .bg-white,
html.dark .bg-surface,
html.dark .bg-surface-bright,
html.dark .bg-surface-container-lowest,
html.dark .bg-background{background-color:#1e293b !important}

html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-surface-container-low,
html.dark .bg-surface-container,
html.dark .bg-ink-50{background-color:#0F172A !important}

html.dark .bg-surface-container-high,
html.dark .bg-surface-container-highest{background-color:#334155 !important}

/* Whitepaper tables: explicit tbody/td bg flip in dark mode */
html.dark table tbody,
html.dark table tbody tr,
html.dark table tbody td{background-color:#1e293b !important;color:#CBD5E1 !important}
html.dark table thead th{color:#94A3B8 !important}

/* Glass nav */
html.dark .glass-nav,
html.dark nav.bg-white\/80,
html.dark nav.bg-white\/90{background:rgba(15,23,42,0.78) !important;backdrop-filter:blur(12px)}

/* Borders — light → dark */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-outline-variant,
html.dark .border-ink-100,
html.dark .border-ink-200{border-color:#334155}

html.dark .divide-outline-variant > * + *,
html.dark .divide-slate-100 > * + *,
html.dark .divide-slate-200 > * + *{border-color:#334155}

/* Text colors — dark → light */
html.dark .text-slate-900,
html.dark .text-on-surface,
html.dark .text-on-background,
html.dark .text-ink-900,
html.dark .text-black{color:#f1f5f9}

html.dark .text-slate-800,
html.dark .text-ink-800{color:#e2e8f0}

html.dark .text-slate-700,
html.dark .text-on-surface-variant,
html.dark .text-ink-700{color:#cbd5e1}

html.dark .text-slate-600,
html.dark .text-secondary,
html.dark .text-ink-600{color:#94a3b8}

html.dark .text-slate-500,
html.dark .text-ink-500{color:#94a3b8}

html.dark .text-secondary{color:#94a3b8}
html.dark .text-on-background{color:#e2e8f0}

/* Surface container variants */
html.dark [class*="bg-surface-container"]{background-color:#1e293b}
html.dark [class*="bg-surface-container-high"]{background-color:#334155}
html.dark [class*="bg-surface-container-low"]{background-color:#0A1629}

html.dark .text-slate-400,
html.dark .text-slate-300,
html.dark .text-ink-400,
html.dark .text-ink-300{color:#64748b}

/* Brand accents stay legible */
html.dark .text-primary{color:#D4FB8E}
html.dark .text-primary-container{color:#B3F85E}
html.dark .bg-primary{background-color:#B3F85E}
html.dark .bg-primary-container{background-color:#B3F85E}

/* Inputs (exclude popup gates) */
html.dark input:not([style*="background"]),
html.dark textarea:not([style*="background"]){color:#e2e8f0;background-color:#1e293b;border-color:#334155}
/* Force popup inputs to stay white */
#wp-gate-global input,#wp-gate-global-form input,#wp-gate input,#wp-gate-form input{background:#ffffff !important;color:#0A1629 !important;border-color:#e2e8f0 !important;}
#wp-gate-global input:-webkit-autofill,#wp-gate input:-webkit-autofill,#wp-gate-global-form input:-webkit-autofill,#wp-gate-form input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #ffffff inset !important;-webkit-text-fill-color:#0A1629 !important;}

/* Code blocks (often already dark, leave them alone) */
html.dark code{color:#D4FB8E}

/* Tables */
html.dark th,
html.dark td{border-color:#334155}

/* Shadows — keep elevation subtle on dark */
html.dark .shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.4)}
html.dark .shadow-md{box-shadow:0 4px 8px rgba(0,0,0,.45)}
html.dark .shadow-lg,html.dark .shadow-xl,html.dark .shadow-2xl{box-shadow:0 10px 20px rgba(0,0,0,.5)}
html.dark .shadow-card,html.dark .shadow-soft,html.dark .shadow-elev{box-shadow:0 4px 16px rgba(0,0,0,.4)}

/* Footer (which uses bg-slate-9xx by default — keep on brand navy) */
html.dark footer.bg-slate-900,
html.dark footer.bg-slate-950{background-color:var(--dt-navy)}

/* Industrial grid pattern flips */
html.dark .industrial-grid{background-image:radial-gradient(circle,#334155 1px,transparent 1px)}
html.dark .grid-bg{background-image:linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px) !important}

/* Hover states keep readable */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-ink-50:hover{background-color:#1e293b}
html.dark .hover\:bg-white\/10:hover{background-color:rgba(255,255,255,.06)}

/* Toggle button (when injected via theme.js) icon recolor in dark */
html.dark #theme-toggle{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);color:#fbbf24}

/* Selection */
html.dark ::selection{background:rgba(16,185,129,.35);color:#F2FFE3}

/* Smooth transition between modes */
html,body,*{transition:background-color .25s ease,border-color .25s ease,color .25s ease}

/* ============================================================
   WHITEPAPER dark-mode patch
   The whitepaper uses extensive inline styles with hardcoded
   light-mode colors. Override the most common ones in dark mode.
   ============================================================ */

/* Dark navy text (#0A1629) on dark bg = invisible. Map to light. */
html.dark [style*="color:#0A1629"],
html.dark [style*="color: #0A1629"]{color:#E2E8F0 !important}

/* Medium gray body text (#5A6B7F) on dark bg = barely legible. */
html.dark [style*="color:#5A6B7F"],
html.dark [style*="color: #5A6B7F"]{color:#94A3B8 !important}

/* Other dark text colors used inline */
html.dark [style*="color:#1F2937"],
html.dark [style*="color:#374151"],
html.dark [style*="color:#475569"],
html.dark [style*="color:#1E293B"],
html.dark [style*="color:#334155"]{color:#CBD5E1 !important}

/* Light backgrounds inside callouts and tables -> dark equivalent */
html.dark [style*="background:#F5F7FA"],
html.dark [style*="background: #F5F7FA"],
html.dark [style*="background:#FAFBFC"],
html.dark [style*="background:#F8FAFC"],
html.dark [style*="background:#F1F5F9"],
html.dark [style*="background:#FFFFFF"],
html.dark [style*="background: #FFFFFF"],
html.dark [style*="background:#fff"],
html.dark [style*="background-color:#F5F7FA"],
html.dark [style*="background-color:#FFFFFF"]{background:#1e293b !important;background-color:#1e293b !important}

/* Light borders -> subtle dark borders */
html.dark [style*="border:1px solid #E2E8F0"],
html.dark [style*="border: 1px solid #E2E8F0"],
html.dark [style*="border-color:#E2E8F0"],
html.dark [style*="border:1px solid #CBD5E1"],
html.dark [style*="border:1px solid #F1F5F9"],
html.dark [style*="border-bottom:1px solid #E2E8F0"]{border-color:rgba(255,255,255,0.10) !important}

/* When/Where axiom underline stays green but brighter on dark */
html.dark [style*="border-bottom:2px solid rgba(14,159,110,0.3)"]{border-bottom-color:rgba(179,248,94,0.55) !important}

/* The cover white .page surface is fine in dark via .bg-white override above,
   but ensure inline white backgrounds on .wp-section pages also flip */
html.dark .wp-section .page{background:#0A1629 !important}
html.dark .wp-section [style*="background:#FFFFFF"],
html.dark .wp-section [style*="background: #FFFFFF"]{background:#1e293b !important}

/* Mono/label text in callout corners (#8896A6) bumps to lighter for legibility */
html.dark [style*="color:#8896A6"]{color:#94A3B8 !important}

/* === Comprehensive dark-text overrides for all hardcoded inline colors === */
/* Slate / navy family -> light gray on dark bg */
html.dark [style*="color:#334155"],
html.dark [style*="color: #334155"],
html.dark [style*="color:#475569"],
html.dark [style*="color: #475569"],
html.dark [style*="color:#64748B"],
html.dark [style*="color: #64748B"],
html.dark [style*="color:#1E293B"],
html.dark [style*="color: #1E293B"]{color:#CBD5E1 !important}

/* Gray family -> light gray */
html.dark [style*="color:#374151"],
html.dark [style*="color:#4B5563"],
html.dark [style*="color:#6B7280"],
html.dark [style*="color:#9CA3AF"],
html.dark [style*="color:#D1D5DB"],
html.dark [style*="color:#d1d5db"],
html.dark [style*="color:#E2E8F0"]{color:#CBD5E1 !important}

/* Indigo / blue accents -> brighter blue on dark */
html.dark [style*="color:#1D4ED8"],
html.dark [style*="color:#1E40AF"],
html.dark [style*="color:#3B82F6"],
html.dark [style*="color:#3730A3"],
html.dark [style*="color:#4F46E5"],
html.dark [style*="color:#6366F1"],
html.dark [style*="color:#5B21B6"],
html.dark [style*="color:#7C3AED"]{color:#A5B4FC !important}

/* Teal accents -> brighter teal on dark */
html.dark [style*="color:#0F766E"],
html.dark [style*="color:#134E4A"]{color:#5EEAD4 !important}

/* Amber / orange / red kept readable */
html.dark [style*="color:#92400E"],
html.dark [style*="color:#9A3412"],
html.dark [style*="color:#B45309"],
html.dark [style*="color:#C2410C"]{color:#FDBA74 !important}

/* Light backgrounds used in callouts -> dark surface */
html.dark [style*="background:#DBEAFE"],
html.dark [style*="background:#EFF6FF"],
html.dark [style*="background:#EEF2FF"],
html.dark [style*="background:#EDE9FE"],
html.dark [style*="background:#F0F9FF"],
html.dark [style*="background:#F0FDFA"],
html.dark [style*="background:#F1F5F9"],
html.dark [style*="background:#FDF4FF"],
html.dark [style*="background:#FEE2E2"],
html.dark [style*="background:#FEF3C7"],
html.dark [style*="background:#FFF7ED"],
html.dark [style*="background:#FFFBEB"],
html.dark [style*="background:#fafafa"],
html.dark [style*="background:#f0fdf4"],
html.dark [style*="background:#e5e7eb"],
html.dark [style*="background-color:#DBEAFE"],
html.dark [style*="background-color:#EFF6FF"],
html.dark [style*="background-color:#EEF2FF"],
html.dark [style*="background-color:#F0F9FF"],
html.dark [style*="background-color:#FEE2E2"],
html.dark [style*="background-color:#FEF3C7"]{background:#1e293b !important;background-color:#1e293b !important}

/* Light blue/teal accent backgrounds -> tinted dark surface */
html.dark [style*="background:#E8EEF3"]{background:#1e293b !important}

/* Highlight Tradability paragraph in lime/green */
html.dark .tradability-highlight,
.tradability-highlight{color:var(--dt-lime) !important;font-weight:700}

/* Tables inside whitepaper: dark mode header / body */
html.dark .bg-slate-100{background-color:#1e293b !important}
html.dark .bg-emerald-50{background-color:rgba(179,248,94,0.08) !important}
html.dark .border-slate-100,
html.dark .border-slate-200{border-color:rgba(255,255,255,0.10) !important}
html.dark table thead tr,
html.dark thead.bg-slate-100,
html.dark thead tr.bg-slate-100{background-color:#0F172A !important}