/* Accessibility + readability overrides — loaded after main.css so these win.
   Updated 2026-07-27: Larger font sizes + better font stack for improved readability.
   Founder feedback: "fonts are so tiny maybe select different fonts so they are readable" */

/* --- Font stack: System fonts (clean, crisp, universally readable) ------- */
:root {
    --font-stack-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-stack-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, "Courier New", monospace;
}

/* --- Base size & line-height -------------------------------------------- */
html { font-size: 16px; }
body {
    font-family: var(--font-stack-ui) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* All standard text elements get the readable font and better size */
p, span, div, label, a, li, td, th {
    font-family: var(--font-stack-ui) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Headings get explicit scales instead of inheriting tiny */
h1 { font-size: 32px !important; line-height: 1.25 !important; font-weight: 700 !important; }
h2 { font-size: 28px !important; line-height: 1.3 !important; font-weight: 700 !important; }
h3 { font-size: 24px !important; line-height: 1.35 !important; font-weight: 600 !important; }
h4 { font-size: 20px !important; line-height: 1.4 !important; font-weight: 600 !important; }
h5 { font-size: 18px !important; line-height: 1.45 !important; font-weight: 600 !important; }

/* --- Forms --- inputs at 16px avoids mobile zoom-on-focus --------------- */
input, textarea, select, .it-input, .form-control {
    font-family: var(--font-stack-ui) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 12px 16px !important;
    min-height: 48px;                  /* WCAG touch target */
    font-weight: 400 !important;
}
label, .it-input-label, .form-label {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}

/* Buttons are tap-targets: min 44x44 + readable text */
button, .btn, .it-btn, [role="button"] {
    font-family: var(--font-stack-ui) !important;
    font-size: 16px !important;
    min-height: 48px;
    padding: 12px 20px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

/* --- Toasts / alerts / small notifications ------------------------------ */
.swal2-popup, .swal2-html-container, .swal2-title,
.toast, .toast-body, .alert, .alert-message,
.notification, .flash-message {
    font-family: var(--font-stack-ui) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}
.swal2-title { font-size: 22px !important; font-weight: 700 !important; }

/* --- Table text (admin panels are heavy on tables) ---------------------- */
table, table td, table th, .table td, .table th {
    font-family: var(--font-stack-ui) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}
table th, .table th {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* --- Stat cards & dashboard metrics (make numbers prominent) ----------- */
.text-lg { font-size: 22px !important; line-height: 1.4 !important; font-weight: 700 !important; }
.text-xl { font-size: 26px !important; line-height: 1.3 !important; font-weight: 700 !important; }
.text-2xl { font-size: 30px !important; line-height: 1.2 !important; font-weight: 700 !important; }

/* Small text (labels on cards) should still be readable */
.text-xs {
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}
.text-sm {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Monospace for data/numbers - readable mono stack */
.font-mono, code, pre, [class*="font-mono"] {
    font-family: var(--font-stack-mono) !important;
    font-weight: 500 !important;
}

/* --- Contrast boosts (WCAG AA compliant on dark backgrounds) ------------ */
/* Background references: --it-dark: #080c14, --it-card: #111923, --it-surface: #0d1320 */

/* Body text and muted text - boosted to meet 4.5:1 on #080c14 */
body, .text-gray-500, .text-gray-600, .text-muted {
    color: #e5e9f0 !important;         /* Was #d9dce3 — now brighter for better contrast */
}

/* Secondary text - still distinct but readable */
.text-gray-300, .text-gray-400 {
    color: #d8dee9 !important;         /* Light grey with good contrast */
}

/* Primary readable text */
.text-gray-100, .text-gray-200, .text-white {
    color: #eceff4 !important;         /* Near-white, excellent contrast */
}

/* Faint/tertiary text (min 3:1 for large text / UI components) */
.text-gray-700, .text-gray-800 {
    color: #9ba7bf !important;         /* Was --it-faint #3f5068 — much lighter now */
}

/* Links - high contrast blue */
a, a:visited { color: #6eb1ff !important; }
a:hover { color: #9eccff !important; text-decoration: underline; }

/* Error/validation text needs to be visible */
.it-error, .invalid-feedback, .error, [class*="error"] {
    font-size: 15px !important;
    color: #ff6b6b !important;
    font-weight: 600 !important;
}

/* Success states */
.text-green-400, .text-green-500 {
    color: #4ade80 !important;         /* Brighter green for better visibility */
}

/* Warning/alert states */
.text-orange-400, .text-orange-500, .text-amber-500 {
    color: #fbbf24 !important;         /* Clear amber/gold */
}

/* Danger states */
.text-red-400, .text-red-500 {
    color: #f87171 !important;         /* Clear, visible red */
}

/* Brand purple → blue for better contrast */
.text-purple-500, .text-purple-600, .text-purple-700 {
    color: #6eb1ff !important;         /* IT blue instead of purple */
}

/* --- Visible focus rings (critical for keyboard users) ------------------ */
*:focus-visible {
    outline: 3px solid #1b6bf8 !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}
input:focus, textarea:focus, select:focus,
.it-input:focus, .form-control:focus {
    outline: 3px solid #1b6bf8 !important;
    outline-offset: 1px !important;
    box-shadow: 0 0 0 4px rgba(27,107,248,0.3) !important;
}

/* --- Respect prefers-reduced-motion ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Skip-to-content link (hidden until focused) ------------------------ */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #1b6bf8;
    color: white;
    padding: 12px 18px;
    font-size: 16px;
    z-index: 10000;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}
.skip-to-content:focus { left: 0; }

/* --- Dashboard-specific overrides --------------------------------------- */
/* Stat card labels need good contrast */
[data-pf], [data-live] {
    font-size: 16px !important;
}

/* Card labels/descriptions */
.ts-gray-2 p.text-xs, .ts-gray-1 p.text-xs {
    color: #b4bfcd !important;         /* Lighter than base grey for labels */
    font-size: 13px !important;
}

/* Card data/numbers */
.ts-gray-2 p.font-bold, .ts-gray-1 p.font-bold,
.ts-gray-2 .font-mono, .ts-gray-1 .font-mono {
    color: #eceff4 !important;         /* Bright white for data */
    font-size: 22px !important;
    font-weight: 700 !important;
}