/* ==========================================================================
   MK STORE v26 — typography stability + component-aware text visibility

   Goals
   - Keep the original Kanit / Prompt identity across frontend and backend.
   - NEVER globally force a text color. Route/component CSS owns its contrast.
   - Protect known light-surface controls so dark text is not overwritten by
     broad white-text theme rules.
   - Preserve Font Awesome glyph families.
   ========================================================================== */
:root {
    --mk-site-font: 'Kanit', 'Prompt', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-main: var(--mk-site-font);
    --font-cyber: var(--mk-site-font);
    --font-mono: var(--mk-site-font);
}

/* Typography only. Do not set color / -webkit-text-fill-color here. */
html,
body,
body *:not(i):not(svg):not(path),
button,
input,
select,
textarea,
option,
optgroup {
    font-family: var(--mk-site-font) !important;
    font-synthesis: none !important;
}

/* Font Awesome must keep its own font family or icons become missing glyphs. */
html body :is(
    i.fa, i.fas, i.far, i.fal, i.fad, i.fab,
    .fa, .fas, .far, .fal, .fad, .fa-solid, .fa-regular,
    [class^="fa-"], [class*=" fa-"]
) {
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
    font-synthesis: none !important;
}

html body :is(i.fab, .fab, .fa-brands) {
    font-family: "Font Awesome 6 Brands" !important;
}

/* --------------------------------------------------------------------------
   LIGHT-SURFACE CONTRAST GUARD
   The site is dark by default, but some interactive states intentionally use
   white/light backgrounds. These MUST use dark text. This is the case that
   previously made selected auth tabs look blank.
   -------------------------------------------------------------------------- */
html body :is(
    .auth-tab-pill.active,
    .auth-submit-btn,
    .btn-light,
    .text-bg-light
) {
    color: #050508 !important;
    -webkit-text-fill-color: #050508 !important;
}

html body :is(
    .auth-tab-pill.active,
    .auth-submit-btn,
    .btn-light,
    .text-bg-light
) :not(svg):not(path) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Blue brand CTAs are deliberately recolored by index.php after the base theme.
   They are NOT light surfaces. v25 incorrectly classified these as light, so
   the late-loaded typography sheet turned their text black on a blue button. */
html body :is(.btn-top-pill-reg, .btn-gate-login) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body :is(.btn-top-pill-reg, .btn-gate-login) :not(svg):not(path) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Bootstrap outline-light becomes a light surface on hover/active. */
html body .btn-outline-light:is(:hover, :focus, :active, .active),
html body .show > .btn-outline-light.dropdown-toggle {
    color: #050508 !important;
    -webkit-text-fill-color: #050508 !important;
}

/* Generic Bootstrap light utilities: only change text when the element itself
   is explicitly marked as a light surface. */
html body :is(button, a, .btn, .badge, .alert, .nav-link).bg-white,
html body :is(button, a, .btn, .badge, .alert, .nav-link).bg-light {
    color: #050508 !important;
    -webkit-text-fill-color: #050508 !important;
}


/* Bootstrap light containers can include descendants that are globally styled
   white by the dark theme (for example .text-muted inside .bg-white). Force a
   readable dark foreground only inside explicitly light surfaces. */
html body :is(.bg-white, .bg-light, .text-bg-light, .alert-light, .table-light, .list-group-item-light),
html body :is(.bg-white, .bg-light, .text-bg-light, .alert-light, .table-light, .list-group-item-light) :not(svg):not(path) {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Bootstrap yellow/cyan surfaces also require a dark foreground. Exclude
   opacity utilities because those are translucent accents on the dark theme. */
html body :is(
    .btn-warning,
    .btn-info:not(.text-white),
    .text-bg-warning,
    .text-bg-info,
    .bg-warning:not([class*="bg-opacity-"]),
    .bg-info:not([class*="bg-opacity-"]),
    .alert-warning:not([class*="bg-opacity-"]),
    .alert-info:not([class*="bg-opacity-"]),
    .table-warning,
    .table-info,
    .list-group-item-warning,
    .list-group-item-info
),
html body :is(
    .btn-warning,
    .btn-info:not(.text-white),
    .text-bg-warning,
    .text-bg-info,
    .bg-warning:not([class*="bg-opacity-"]),
    .bg-info:not([class*="bg-opacity-"]),
    .alert-warning:not([class*="bg-opacity-"]),
    .alert-info:not([class*="bg-opacity-"]),
    .table-warning,
    .table-info,
    .list-group-item-warning,
    .list-group-item-info
) :not(svg):not(path) {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

html body :is(.btn-outline-warning, .btn-outline-info):is(:hover, :focus, :active, .active),
html body .show > :is(.btn-outline-warning, .btn-outline-info).dropdown-toggle,
html body :is(.btn-outline-warning, .btn-outline-info):is(:hover, :focus, :active, .active) :not(svg):not(path),
html body .show > :is(.btn-outline-warning, .btn-outline-info).dropdown-toggle :not(svg):not(path) {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Dark-theme native controls: keep options readable even when the OS opens a
   light native select menu. Browsers that honor option backgrounds use dark;
   browsers that ignore it fall back to their own native contrast handling. */
html body option,
html body optgroup {
    background-color: #0b0d12;
    color: #ffffff;
}

/* Prevent WebKit autofill from painting a light background behind white text
   on the site's dark inputs. */
html body :is(.auth-custom-input, .admin-input, .form-control, .form-select):-webkit-autofill,
html body :is(.auth-custom-input, .admin-input, .form-control, .form-select):-webkit-autofill:hover,
html body :is(.auth-custom-input, .admin-input, .form-control, .form-select):-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0c0d14 inset !important;
    box-shadow: 0 0 0 1000px #0c0d14 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
}