/* ── Theme CSS variables ──────────────────────────────────── */
:root {
  --color-accessible-subtle: #7a8694;

  /* Surface scale */
  --surface-950: #080a0d;
  --surface-900: #0d0f12;
  --surface-800: #12151a;
  --surface-700: #181c23;
  --surface-600: #1e242e;
  --surface-500: #252d3a;
  --surface-400: #2e3847;

  /* Ink scale */
  --ink:         #f0f2f5;
  --ink-muted:   #8a96a8;
  --ink-subtle:  #7a8694;

  /* Brand */
  --brand-400:   #00c2ff;
  --brand-300:   #1ad4ff;

  /* Semantic */
  --border-color:      rgba(30,36,46,0.6);   /* surface-600/60 */
  --card-bg:           #12151a;
  --header-bg:         rgba(13,15,18,0.80);
  --footer-bg:         #12151a;
  --input-bg:          #181c23;
}

html.light {
  --surface-950: #f0f4f8;
  --surface-900: #f8f9fb;
  --surface-800: #ffffff;
  --surface-700: #f1f4f8;
  --surface-600: #e2e8f0;
  --surface-500: #cbd5e1;
  --surface-400: #94a3b8;

  --ink:         #0f172a;
  --ink-muted:   #475569;
  --ink-subtle:  #64748b;

  --brand-400:   #0284c7;
  --brand-300:   #0ea5e9;

  --border-color:      rgba(203,213,225,0.6);
  --card-bg:           #ffffff;
  --header-bg:         rgba(248,249,251,0.90);
  --footer-bg:         #ffffff;
  --input-bg:          #f1f4f8;
}

/* ── Apply theme vars to Tailwind colour classes ─────────── */
/* Page background */
.bg-surface-900  { background-color: var(--surface-900)  !important; }
.bg-surface-800  { background-color: var(--surface-800)  !important; }
.bg-surface-700  { background-color: var(--surface-700)  !important; }
.bg-surface-600  { background-color: var(--surface-600)  !important; }
.bg-surface-500  { background-color: var(--surface-500)  !important; }
.bg-surface-950  { background-color: var(--surface-950)  !important; }

/* Text */
.text-ink        { color: var(--ink)        !important; }
.text-ink-muted  { color: var(--ink-muted)  !important; }
.text-ink-subtle { color: var(--ink-subtle) !important; }

/* Brand */
.text-brand-400  { color: var(--brand-400)  !important; }
.text-brand-300  { color: var(--brand-300)  !important; }
.bg-brand-400    { background-color: var(--brand-400) !important; }
.hover\:text-brand-400:hover { color: var(--brand-400) !important; }
.hover\:bg-brand-300:hover   { background-color: var(--brand-300) !important; }
.border-brand-400 { border-color: var(--brand-400) !important; }

/* Borders */
.border-surface-600\/40 { border-color: color-mix(in srgb, var(--surface-600) 40%, transparent) !important; }
.border-surface-600\/60 { border-color: color-mix(in srgb, var(--surface-600) 60%, transparent) !important; }
.border-surface-500\/40 { border-color: color-mix(in srgb, var(--surface-500) 40%, transparent) !important; }
.border-surface-500\/60 { border-color: color-mix(in srgb, var(--surface-500) 60%, transparent) !important; }
.border-surface-400     { border-color: var(--surface-400) !important; }

/* Header / footer special backgrounds */
header.sticky { background-color: var(--header-bg) !important; }
footer        { background-color: var(--footer-bg) !important; }

/* Backdrop blur bg on header */
.bg-surface-900\/80 { background-color: var(--header-bg) !important; }
.bg-surface-800\/60 { background-color: color-mix(in srgb, var(--surface-800) 60%, transparent) !important; }
.bg-surface-800\/40 { background-color: color-mix(in srgb, var(--surface-800) 40%, transparent) !important; }
.bg-surface-700\/50 { background-color: color-mix(in srgb, var(--surface-700) 50%, transparent) !important; }
.bg-surface-700\/60 { background-color: color-mix(in srgb, var(--surface-700) 60%, transparent) !important; }
.bg-surface-950\/90 { background-color: color-mix(in srgb, var(--surface-950) 90%, transparent) !important; }

/* Input / form backgrounds */
.bg-surface-800.shadow-card { background-color: var(--card-bg) !important; }

/* Light mode — swap processing overlay text */
html.light .text-ink-muted { color: var(--ink-muted) !important; }

/* Light mode — nav active state bg */
.bg-brand-400\/10  { background-color: color-mix(in srgb, var(--brand-400) 10%, transparent) !important; }
.bg-brand-400\/8   { background-color: color-mix(in srgb, var(--brand-400)  8%, transparent) !important; }
.bg-brand-400\/15  { background-color: color-mix(in srgb, var(--brand-400) 15%, transparent) !important; }
.border-brand-400\/30 { border-color: color-mix(in srgb, var(--brand-400) 30%, transparent) !important; }
.border-brand-400\/20 { border-color: color-mix(in srgb, var(--brand-400) 20%, transparent) !important; }
.border-brand-400\/40 { border-color: color-mix(in srgb, var(--brand-400) 40%, transparent) !important; }

/* Light mode — fid-prose colours */
html.light .fid-prose        { color: #334155; }
html.light .fid-prose h1,
html.light .fid-prose h2,
html.light .fid-prose h3,
html.light .fid-prose h4     { color: #0f172a; }
html.light .fid-prose code   { background: #f1f5f9; border-color: #e2e8f0; color: #0369a1; }
html.light .fid-prose pre    { background: #f8fafc; border-color: #e2e8f0; }
html.light .fid-prose pre code { color: #334155; }
html.light .fid-prose blockquote { color: #64748b; border-left-color: #0369a1; }
html.light .fid-prose td     { color: #334155; }
html.light .fid-prose th     { background: #f1f5f9; color: #0f172a; }
html.light .fid-prose a      { color: #0369a1; text-decoration-color: rgba(3,105,161,.5); }
html.light .fid-prose a:hover { text-decoration-color: #0369a1; }
html.light .fid-prose strong  { color: #0f172a; }

/* Light mode — surface-900 text (e.g. scan button label) */
html.light .text-surface-900 { color: var(--surface-900) !important; }

/* ── Light mode — WCAG 2.1 AA overrides ──────────────────── */

/* ink scale */
html.light .text-ink        { color: #0f172a !important; }  /* 18.10:1 on white ✓ */
html.light .text-ink-muted  { color: #475569 !important; }  /* 6.54:1 on white ✓ */
html.light .text-ink-subtle { color: #64748b !important; }  /* 4.54:1 on white ✓ */

/* Brand — darker blue for sufficient contrast on white backgrounds */
html.light .text-brand-400               { color: #0369a1 !important; }  /* 7.05:1 ✓ */
html.light .text-brand-300               { color: #0284c7 !important; }  /* 5.27:1 ✓ */
html.light .hover\:text-brand-400:hover  { color: #0369a1 !important; }
html.light .bg-brand-400                 { background-color: #0369a1 !important; }
html.light .hover\:bg-brand-300:hover    { background-color: #0284c7 !important; }
html.light .border-brand-400             { border-color: #0369a1 !important; }

/* Result badges — light mode */
html.light .fid-badge--ok {
  background: rgba(5,150,105,.12);
  color: #047857;       /* 5.92:1 on white ✓ */
  border-color: rgba(5,150,105,.35);
}
html.light .fid-badge--warn {
  background: rgba(180,83,9,.10);
  color: #b45309;       /* 4.66:1 on white ✓ */
  border-color: rgba(180,83,9,.35);
}

/* Error page decorative numbers — light mode */
html.light .fid-error-number { color: #cbd5e1; }  /* decorative, aria-hidden ✓ */

/* ELA overlay labels — always dark bg regardless of theme (overlaid on image) */
.fid-overlay-label { background: rgba(13,15,18,0.72); }

/* Breadcrumb separators */
html.light .text-surface-400 { color: #94a3b8 !important; }  /* decorative ✓ */

/* Placeholder text */
html.light ::placeholder { color: #94a3b8 !important; opacity: 1; }

/* Focus ring */
html.light :focus-visible { outline-color: #0369a1; }

/* Skip link */
html.light .skip-link { background: #0369a1; color: #ffffff; }

/* Card borders */
html.light .hover\:border-brand-400\/30:hover { border-color: rgba(3,105,161,.30) !important; }
html.light .border-brand-400\/50              { border-color: rgba(3,105,161,.50) !important; }

/* shadow-glow variants */
html.light .shadow-glow-sm  { box-shadow: 0 0 10px 0 rgba(3,105,161,0.15); }
html.light .hover\:shadow-glow-cyan:hover { box-shadow: 0 0 24px 0 rgba(3,105,161,0.20); }

/* ── Prose / blog content ─────────────────────────────────── */
.fid-prose {
  color: #c8d0dc;  /* 12.35:1 on surface-900 ✓ */
  line-height: 1.75;
  font-size: 0.9375rem;
}
.fid-prose h1,
.fid-prose h2,
.fid-prose h3,
.fid-prose h4 {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-weight: 500;
  color: #f0f2f5;  /* 17.11:1 ✓ */
  margin-top: 2em;
  margin-bottom: 0.75em;
  line-height: 1.3;
}
.fid-prose h1 { font-size: 1.75rem; }
.fid-prose h2 { font-size: 1.375rem; }
.fid-prose h3 { font-size: 1.125rem; }
.fid-prose h4 { font-size: 1rem; }

.fid-prose p  { margin-bottom: 1.25em; }

.fid-prose a {
  color: #00c2ff;  /* 9.29:1 on surface-900 ✓ */
  text-decoration-line: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,194,255,.5);
  transition: text-decoration-color 0.15s;
}
.fid-prose a:hover { text-decoration-color: #00c2ff; }

.fid-prose ul,
.fid-prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25em;
}
.fid-prose ul { list-style-type: disc; }
.fid-prose ol { list-style-type: decimal; }
.fid-prose li { margin-bottom: 0.4em; }

.fid-prose strong { color: #f0f2f5; font-weight: 600; }

.fid-prose blockquote {
  border-left: 3px solid #00c2ff;
  padding-left: 1rem;
  margin: 1.5em 0;
  color: #8a96a8;  /* 6.41:1 on surface-900 ✓ */
  font-style: italic;
}

.fid-prose code {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.85em;
  background: #1e242e;
  border: 1px solid #2e3847;
  border-radius: 4px;
  padding: 0.15em 0.4em;
  color: #00c2ff;  /* 9.29:1 ✓ */
}

.fid-prose pre {
  background: #12151a;
  border: 1px solid #252d3a;
  border-radius: 10px;
  padding: 1.25rem;
  overflow-x: auto;
  margin-bottom: 1.5em;
}
.fid-prose pre code {
  background: none;
  border: none;
  padding: 0;
  color: #c8d0dc;  /* 12.35:1 ✓ */
}

.fid-prose img {
  border-radius: 12px;
  max-width: 100%;
  margin: 1.5em auto;
  display: block;
}

.fid-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
  font-size: 0.875rem;
}
.fid-prose th {
  background: #1e242e;
  color: #f0f2f5;  /* 13.90:1 on #1e242e ✓ */
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid #252d3a;
}
.fid-prose td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #1e242e;
  color: #c8d0dc;  /* 12.35:1 ✓ */
}

/* ── Result badges ────────────────────────────────────────── */
.fid-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.fid-badge--ok {
  background: rgba(16,185,129,.15);
  color: #10b981;  /* 7.21:1 on surface-800 ✓ */
  border: 1px solid rgba(16,185,129,.35);
}
.fid-badge--warn {
  background: rgba(245,158,11,.15);
  color: #f59e0b;  /* 8.52:1 on surface-800 ✓ */
  border: 1px solid rgba(245,158,11,.35);
}

.text-ink-subtle { color: #7a8694 !important; }

::placeholder { color: #7a8694 !important; opacity: 1; }
.placeholder-ink-subtle::placeholder { color: #7a8694 !important; opacity: 1; }

/* ── Stretched link (card covers) ────────────────────────── */
.stretched-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── Animation delay utilities ───────────────────────────── */
.delay-100 { animation-delay: 0.10s; }
.delay-200 { animation-delay: 0.20s; }
.delay-300 { animation-delay: 0.30s; }

/* ── AdSense CLS guard ───────────────────────────────────── */
.adsbygoogle { min-height: 90px; }

:focus-visible {
  outline: 2px solid #00c2ff;
  outline-offset: 3px;
}

/* Remove default focus for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Skip link — WCAG 2.4.1 bypass blocks ────────────────── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #00c2ff;
  color: #0d0f12;
  padding: 8px 16px;
  z-index: 10000;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0 0 6px 0;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 0;
}

/* Links must not rely on colour alone to be distinguished */
a:not([class]):hover {
  text-decoration: underline;
}

/* ── Error page decorative numbers ───────────────────────── */
.fid-error-number {
  color: #2e3847;  /* decorative only, not conveying info */
  user-select: none;
  aria-hidden: true;
}