/* ============================================================================
   theme-core.css — cross-surface theme tokens, utilities, and the light "paper"
   island. Loaded on EVERY surface (admin, tenant/marsland, frontend, landlord,
   auth) after the vendor CSS. New per-view styling should reference these
   --app-* tokens (or the .u-* utilities) so it works in both light and dark
   automatically, instead of hardcoding hex colours.
   Canonical theme attribute: html[data-theme="light|dark"].
   ========================================================================== */

:root {
    /* Default to light UA rendering; the boot script pins this per chosen theme,
       and this is the no-JS fallback so a dark OS doesn't force a dark canvas. */
    color-scheme: light;
    --app-bg:          #f4f5f7;
    --app-surface:     #ffffff;
    --app-surface-2:   #f7f8fa;
    --app-text:        #1b2559;
    --app-text-muted:  #6b7280;
    --app-heading:     #101828;
    --app-border:      #e5e7eb;
    --app-input-bg:    #ffffff;
    --app-input-text:  #1b2559;
    --app-link:        #af6117;
    --app-shadow:      0 1px 3px rgba(16, 24, 40, 0.08);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --app-bg:          #0f1728;
    --app-surface:     #1b2436;
    --app-surface-2:   #232f45;
    --app-text:        #e5e9f2;
    --app-text-muted:  #9aa6bd;
    --app-heading:     #f2f5fb;
    --app-border:      #2e3a52;
    --app-input-bg:    #1b2436;
    --app-input-text:  #e5e9f2;
    --app-link:        #d98a3d;
    --app-shadow:      0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ---- Utilities for the per-view long tail ------------------------------- */
.u-surface     { background-color: var(--app-surface) !important; color: var(--app-text); }
.u-surface-2   { background-color: var(--app-surface-2) !important; }
.u-text        { color: var(--app-text) !important; }
.u-text-muted  { color: var(--app-text-muted) !important; }
.u-heading     { color: var(--app-heading) !important; }
.u-border      { border-color: var(--app-border) !important; }

/* ---- Password show/hide toggle (reusable on any surface) ----------------
   Wrap an input in a .position-relative element and add a button with
   [data-password-toggle="<input-id>"]; the shared theme.js runtime handles it. */
.password-field { position: relative; }
.password-field .ot-contact-input,
.password-field .form-control { padding-right: 44px; }
.password-eye-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 4px;
    line-height: 1;
    cursor: pointer;
    color: var(--app-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.password-eye-toggle:hover { color: var(--app-text); }
.password-eye-toggle i { font-size: 18px; }

/* ---- Marsland auth forms (register / login / forgot-password) ------------
   main-style.css hardcodes the field label to `color: var(--white)`, which is
   invisible on the light form and low-contrast on dark. Bind it to the theme
   text token so it reads correctly in BOTH themes. */
.ot-contact-form .ot-contact-label { color: var(--app-text) !important; }

/* Registration page brand logo: show the correct single-tone logo per theme.
   main-style's html.dark-mode swap does not reliably win on this layout, so the
   colored (light) logo was bleeding into the dark canvas. */
html[data-theme="dark"]  .registration-page .light-logo { display: none !important; }
html[data-theme="dark"]  .registration-page .dark-logo  { display: block !important; }
html[data-theme="light"] .registration-page .dark-logo  { display: none !important; }
html[data-theme="light"] .registration-page .light-logo { display: block !important; }

/* ---- "Paper" island: keeps document-like content (e-sign agreements,
   invoice/receipt previews, PDF/print panes, the property-owner form) light
   even while the surrounding chrome is dark. Wrap the document in .force-light. */
.force-light,
html[data-theme="dark"] .force-light {
    color-scheme: light;
    --app-bg:          #f4f5f7;
    --app-surface:     #ffffff;
    --app-surface-2:   #f7f8fa;
    --app-text:        #1b2559;
    --app-text-muted:  #6b7280;
    --app-heading:     #101828;
    --app-border:      #e5e7eb;
    --app-input-bg:    #ffffff;
    --app-input-text:  #1b2559;
    background-color: #ffffff;
    color: #1b2559;
}