/**
 * FreightCorner readable contrast + color-vision support
 *
 * Goals:
 * - WCAG 2.2 AA contrast (4.5:1 normal text, 3:1 large text / UI)
 * - Do not rely on hue alone (orange vs teal / red vs green)
 * - Keep brand orange, but darken it wherever it is used as small text or
 *   as a button fill behind white type
 */

:root {
  --primary: #c2410c;
  --primary-light: #ea580c;
  --primary-dark: #9a3412;
  --fc-text: #0f172a;
  --fc-text-muted: #334155;
  --fc-text-on-dark: #f8fafc;
  --fc-text-muted-on-dark: #e2e8f0;
  --fc-link: #9a3412;
  --fc-cta: #c2410c;
  --fc-cta-hover: #9a3412;
  --fc-canvas: #f8fafc;
  --fc-focus: #0f172a;
  --fc-focus-on-dark: #f8fafc;
}

/* ---------- Public canvas: never render black type on navy ---------- */
html {
  color-scheme: light;
  background-color: var(--fc-canvas);
}

body {
  background-color: var(--fc-canvas);
  color: var(--fc-text);
}

/* Dashboard / authenticated shell stays dark */
body.bg-slate-900,
body.bg-slate-800 {
  color-scheme: dark;
  background-color: #0f172a;
  color: var(--fc-text-on-dark);
}

/* ---------- Muted copy on light surfaces (gray-400/slate-400 fail AA) ---------- */
.text-gray-300,
.text-gray-400,
.text-slate-300,
.text-slate-400,
.text-slate-500 {
  color: var(--fc-text-muted) !important;
}

.placeholder-gray-400::placeholder,
.placeholder-slate-400::placeholder,
.placeholder-slate-500::placeholder,
::placeholder {
  color: #475569 !important;
  opacity: 1;
}

/* ---------- Orange-as-text on light surfaces ---------- */
.text-orange-300,
.text-orange-400,
.text-orange-500,
.text-orange-600,
.text-amber-400,
.text-amber-500,
.text-fc-orange {
  color: var(--fc-link) !important;
}

/* ---------- White type on orange fills: darken the fill ---------- */
.bg-orange-400,
.bg-orange-500,
.bg-orange-600,
.hover\:bg-orange-400:hover,
.hover\:bg-orange-500:hover,
.hover\:bg-orange-600:hover {
  background-color: var(--fc-cta) !important;
}

.hover\:bg-orange-700:hover,
.hover\:bg-orange-800:hover {
  background-color: var(--fc-cta-hover) !important;
}

.from-orange-400,
.from-orange-500,
.from-orange-600 {
  --tw-gradient-from: #c2410c var(--tw-gradient-from-position) !important;
}

.to-orange-500,
.to-orange-600,
.to-orange-700 {
  --tw-gradient-to: #9a3412 var(--tw-gradient-to-position) !important;
}

.btn-primary,
.btn-primary:hover {
  color: #ffffff;
}

.btn-primary {
  background: var(--fc-cta);
}

.btn-primary:hover {
  background: var(--fc-cta-hover);
}

.btn-secondary {
  color: var(--fc-link);
  border-color: var(--fc-cta);
}

.btn-secondary:hover {
  background: var(--fc-cta);
  color: #ffffff;
}

/* ---------- Dark surfaces: restore light type (do not invert the dashboard) ---------- */
.bg-slate-800 .text-gray-300,
.bg-slate-800 .text-gray-400,
.bg-slate-800 .text-slate-300,
.bg-slate-800 .text-slate-400,
.bg-slate-800 .text-slate-500,
.bg-slate-900 .text-gray-300,
.bg-slate-900 .text-gray-400,
.bg-slate-900 .text-slate-300,
.bg-slate-900 .text-slate-400,
.bg-slate-900 .text-slate-500,
.bg-slate-950 .text-gray-300,
.bg-slate-950 .text-gray-400,
.bg-slate-950 .text-slate-300,
.bg-slate-950 .text-slate-400,
.bg-slate-950 .text-slate-500,
.footer .text-gray-300,
.footer .text-gray-400,
.footer .text-slate-300,
.footer .text-slate-400,
.footer .text-slate-500,
body.bg-slate-900 .text-gray-300,
body.bg-slate-900 .text-gray-400,
body.bg-slate-900 .text-slate-300,
body.bg-slate-900 .text-slate-400,
body.bg-slate-900 .text-slate-500,
.text-white .text-gray-300,
.text-white .text-gray-400,
.text-white .text-slate-300,
.text-white .text-slate-400,
.text-white .text-slate-500 {
  color: var(--fc-text-muted-on-dark) !important;
}

.bg-slate-800 .text-orange-300,
.bg-slate-800 .text-orange-400,
.bg-slate-800 .text-orange-500,
.bg-slate-800 .text-amber-400,
.bg-slate-900 .text-orange-300,
.bg-slate-900 .text-orange-400,
.bg-slate-900 .text-orange-500,
.bg-slate-900 .text-amber-400,
.bg-slate-950 .text-orange-300,
.bg-slate-950 .text-orange-400,
.bg-slate-950 .text-amber-400,
.footer .text-orange-300,
.footer .text-orange-400,
.footer .text-orange-500,
.footer .text-amber-400,
body.bg-slate-900 .text-orange-400,
body.bg-slate-900 .text-orange-500,
body.bg-slate-900 .text-amber-400,
.text-white .text-orange-300,
.text-white .text-orange-400,
.text-white .text-orange-500,
.text-white .text-amber-400,
.text-white .text-amber-500 {
  color: #fdba74 !important;
}

.bg-slate-800 ::placeholder,
.bg-slate-900 ::placeholder,
.bg-slate-950 ::placeholder,
body.bg-slate-900 ::placeholder {
  color: #cbd5e1 !important;
}

/* ---------- Gradient/clipped headings: solid brand orange (never transparent) ----------
   text-transparent + bg-clip-text + missing from-orange-700 in compiled Tailwind
   + `* { max-width:100% }` makes accent words like “Document Express” vanish on cream. */
.text-gradient,
.fc-hero-title,
.text-gradient-teal,
.text-transparent.bg-clip-text,
.bg-clip-text.text-transparent {
  color: var(--fc-link) !important;
  -webkit-text-fill-color: var(--fc-link) !important;
  background-image: none !important;
  background: none !important;
}

.text-gradient-teal {
  color: #115e59 !important;
  -webkit-text-fill-color: #115e59 !important;
}

.fc-hero-description {
  color: var(--fc-text-muted);
}

/* ---------- Links: underline so orange vs teal is not the only cue ---------- */
main p a,
main li a,
main dd a,
article a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  color: var(--fc-link);
}

main p a:hover,
main li a:hover,
article a:hover {
  color: var(--fc-cta-hover);
}

/* ---------- Focus: high-contrast ring (not color-only) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--fc-focus);
  outline-offset: 2px;
}

.bg-slate-800 a:focus-visible,
.bg-slate-900 a:focus-visible,
.bg-slate-950 a:focus-visible,
.footer a:focus-visible,
body.bg-slate-900 a:focus-visible,
body.bg-slate-900 button:focus-visible,
body.bg-slate-900 input:focus-visible {
  outline-color: var(--fc-focus-on-dark);
}

/* ---------- Form fields on light pages ---------- */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  color: var(--fc-text);
  background-color: #ffffff;
}

body.bg-slate-900 input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.bg-slate-900 select,
body.bg-slate-900 textarea {
  color: var(--fc-text-on-dark);
  background-color: #1e293b;
}

/* ---------- Status: keep hue AND a left bar / icon so color-blind users can tell states apart ---------- */
[role="alert"] {
  border-left-width: 4px;
}

/* ---------- Cream/orange theme utilities not present in the compiled Tailwind build ---------- */
.from-orange-700,
.from-orange-800 {
  --tw-gradient-from: #9a3412 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(154 52 18 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-orange-500 {
  --tw-gradient-to: rgb(194 65 12 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), #c2410c var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-orange-100\/80 {
  --tw-gradient-to: rgb(255 237 213 / 0.8) var(--tw-gradient-to-position);
}
.text-teal-700 { color: #0f766e; }
.bg-orange-50\/40,
.bg-orange-50\/50,
.bg-orange-50\/60,
.bg-orange-50\/70,
.bg-orange-50\/80 {
  background-color: #fff7ed;
}
.border-teal-200 { border-color: #99f6e4; }
.border-teal-600 { border-color: #0d9488; }
.hover\:bg-orange-50:hover { background-color: #fff7ed; }
.hover\:bg-teal-600:hover { background-color: #0d9488; color: #ffffff; }
.hover\:text-orange-700:hover,
.hover\:text-orange-800:hover,
.hover\:text-orange-900:hover { color: #9a3412; }
.hover\:border-orange-300:hover,
.hover\:border-orange-400:hover { border-color: #fdba74; }
.group-open\:text-orange-700:is([open], .group[open]) { color: #9a3412; }

/* ---------- Windows High Contrast / forced colors ---------- */
@media (forced-colors: active) {
  .text-gradient,
  .fc-hero-title,
  .text-gradient-teal,
  .text-transparent.bg-clip-text,
  .bg-clip-text.text-transparent {
    -webkit-text-fill-color: CanvasText;
    background: none;
    color: CanvasText;
  }

  a,
  button {
    forced-color-adjust: auto;
  }
}