/*
 * ============================================================================
 *  site.css — Dimensional Relativity — UNIFIED SITE STYLESHEET (in progress)
 * ----------------------------------------------------------------------------
 *  Date:    2026-08-27 19:30 UTC
 *  Location:/assets/css/site.css
 *  Purpose: Single source of truth for the custom site's design system. This is
 *           the file the fragmented stylesheets (main/style/blog-system/chapters/
 *           book + per-page inline <style>) are being consolidated into, one page
 *           at a time. LOGIN PAGE is the first migrated section (pilot).
 *           NOTE: phpBB /forums/ is a separate third-party app and is NOT merged.
 *  Author:  frosty | AI: Claude Opus 4.8
 *  TEMPORARY: NO
 *  Load order: linked LAST in includes/header.php so it wins the cascade and can
 *           retire the old global !important color rules component-by-component.
 * ============================================================================
 */

/* ---- Design tokens: the two "inks" for the contrast rule ------------------ */
:root{
  --ink-dark:      #15181f;  /* near-black — primary text on LIGHT surfaces  */
  --ink-dark-2:    #3b414d;  /* secondary/body text on LIGHT surfaces        */
  --ink-white:     #ffffff;  /* bright white — primary text on DARK surfaces */
  --ink-white-2:   #dbe6f0;  /* secondary/body text on DARK surfaces         */
  --link-on-light: #0b6fc0;  /* accessible link color on LIGHT surfaces      */
}

/* ===========================================================================
   CONTRAST RULE — the core of the design system
   Pick the ink by the surface's LIGHTNESS, not the hue:
     .surface-light  -> near-black ink   (white cards, tints, bright cyan/green)
     .surface-dark   -> bright white ink (navy, blue, purple, deep gradients)
   Neon stays an ACCENT (borders/glows/icons) — never body text on light cards.
   These use class specificity so they override the legacy global
   `h1..h6/p/a { ... !important }` rules in main.css without editing them yet.
   =========================================================================== */

/* --- Light surfaces: dark ink -------------------------------------------- */
.surface-light h1, .surface-light h2, .surface-light h3,
.surface-light h4, .surface-light h5, .surface-light h6{
  color: var(--ink-dark) !important;
  -webkit-text-fill-color: var(--ink-dark) !important; /* kill any gradient-clip */
  background: none !important;
}
.surface-light p, .surface-light li, .surface-light label,
.surface-light span, .surface-light dd, .surface-light dt,
.surface-light td, .surface-light th, .surface-light small{
  color: var(--ink-dark-2) !important;
}
.surface-light strong, .surface-light b, .surface-light .stat-number{
  color: var(--ink-dark) !important;
}
.surface-light a{ color: var(--link-on-light) !important; }
.surface-light a:hover{ opacity:.8; }
/* Dark-navy buttons that live inside a light card keep white text
   (e.g. login's "Sign In" .login-button). Bright cyan/green buttons are
   handled by the CONTROL-SURFACE rule below, not here. */
.surface-light .login-button{ color: var(--ink-white) !important; }

/* --- Dark surfaces: white ink (explicit; matches legacy globals) ---------- */
.surface-dark h1, .surface-dark h2, .surface-dark h3,
.surface-dark h4, .surface-dark h5, .surface-dark h6{
  color: var(--ink-white) !important;
  -webkit-text-fill-color: var(--ink-white) !important;
  background: none !important;
}
.surface-dark p, .surface-dark li, .surface-dark label, .surface-dark span{
  color: var(--ink-white-2) !important;
}

/* ===========================================================================
   CONTROL SURFACES — bright cyan/green buttons & pills get DARK ink
   White/neon text on bright cyan (#06ffff) or green (#00ff41) is unreadable
   (~1.1–1.4:1); near-black ink scores 13–14:1 (see /color-test.html). Applies
   site-wide. Dark-colored controls (.btn-secondary, .community pill) keep white.
   =========================================================================== */
.btn-primary, .btn-primary *,
.cta-button.primary, .cta-button.primary *,
.secondary-nav-button.newsletter, .secondary-nav-button.newsletter *,
.secondary-nav-button.forums, .secondary-nav-button.forums *,
/* active / hovered top-nav item gets a bright cyan background -> dark ink */
.nav-link:hover, .nav-link.active,
.nav-menu a:hover, .main-navigation a:hover, .main-navigation a.active,
/* page-specific bright cyan/green buttons found in the site-wide audit */
.read-button, .read-button *, .research-link, .research-link *,
.search-button, .search-button *,
.download-btn-main, .download-btn-main *,
.resource-link, .resource-link *,
.download-button, .download-button *,
.download-link, .download-link *,
.btn-review, .btn-review *, .btn-approve, .btn-approve *,
.period-btn.active, .filter-tab.active, .date-selector a.active,
.chapters-content .btn, .chapter-navigation .btn, .toc .btn{
  color: var(--ink-dark) !important;
  -webkit-text-fill-color: var(--ink-dark) !important;
}
/* Make the two mixed dark→bright pills read cleanly under dark ink by keeping
   their gradient in the bright half of the range. */
.secondary-nav-button.newsletter{
  background: linear-gradient(135deg, var(--light-blue), var(--electric-cyan)) !important;
}
.secondary-nav-button.forums{
  background: linear-gradient(135deg, #16d06a, var(--neon-green)) !important;
}

/* ===========================================================================
   READING HEADERS — retire transparent gradient-clip title fills
   Titles filled with a transparent gradient read as low-contrast "light print".
   Make them solid white on dark, keeping a soft glow for the accent vibe.
   KEPT AS-IS: .brand-text (the logo / brand mark).
   =========================================================================== */
.chapter-header h1, .cover-title h1, .about-hero h1, .hero-title,
.synopsis-section h4, .focus-item h3{
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 0 22px rgba(6, 255, 255, 0.35);
}

/* .title-accent = shared hero sub-line reused across pages (index, research,
   about…), redefined cyan inline on each. One rule -> readable white+glow. */
.title-accent{
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 0 18px rgba(6, 255, 255, 0.45);
}

/* Bright cyan/green CTA panels (e.g. About "Connect & Collaborate") were
   designed with dark text but the global !important rules force it light on a
   bright background -> restore DARK ink on the HEADING/TEXT only (not the
   buttons, whose own dark background needs its light label). */
.contact-cta h1, .contact-cta h2, .contact-cta h3,
.contact-cta h4, .contact-cta > p{
  color: var(--ink-dark) !important;
  -webkit-text-fill-color: var(--ink-dark) !important;
}
/* CTA buttons sit on the bright panel but have their own dark background —
   per the rule, dark background -> bright WHITE label. */
.contact-cta .cta-button,
.contact-cta .cta-button:hover{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ===========================================================================
   BLOG SUBSYSTEM — re-skin the standalone light-theme blog pages to the dark
   site template. Scoped to body.blog-page so the main site is unaffected.
   =========================================================================== */
body.blog-page{
  /* uniformly dark — a bright gradient corner was washing out card text */
  background: #0b1730 !important;
  color: var(--ink-white-2) !important;
}
body.blog-page .blog-header{
  background: linear-gradient(135deg,#0a1326 0%,#14294d 100%) !important;
}
body.blog-page .blog-controls{
  background: rgba(255,255,255,.04) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
}
body.blog-page .blog-header h1{ color:#fff !important; text-shadow:0 0 22px rgba(6,255,255,.35); }
body.blog-page .post-card, body.blog-page .blog-card{
  background-color: #14254a !important;
  background-image: none !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.45) !important;
}
body.blog-page .post-content{ background-color: transparent !important; }
body.blog-page .post-title, body.blog-page .post-title a,
body.blog-page .blog-card h3{ color:#fff !important; }
body.blog-page .post-title a:hover{ color: var(--electric-cyan) !important; }
body.blog-page .post-excerpt, body.blog-page .blog-card p{ color: var(--ink-white-2) !important; }
body.blog-page .post-meta{ color:#b8c5d6 !important; }
body.blog-page .read-more{ color: var(--electric-cyan) !important; }
body.blog-page .post-category{ background: var(--electric-cyan) !important; color: var(--ink-dark) !important; }
body.blog-page .search-box input, body.blog-page select{
  background: rgba(255,255,255,.08) !important; color:#fff !important;
  border-color: rgba(255,255,255,.22) !important;
}
body.blog-page .search-box input::placeholder{ color:#9fb2c4 !important; }
/* footer section headers readable on the dark footer */
body.blog-page .footer-section h3, body.blog-page .footer-section h4{ color:#fff !important; }
body.blog-page .footer-section ul li a{ color:#c7d3e0 !important; }

/* ===========================================================================
   SHARED COMPONENT — password field eye toggle
   One markup pattern + one JS (togglePassword in main.js) for every password
   input across the site. Button carries data-target="<input id>".
   =========================================================================== */
.password-input-wrapper{ position:relative; display:flex; align-items:center; }
.password-input-wrapper input{ padding-right:2.75rem; width:100%; }
.password-input-wrapper .toggle-password,
.password-input-wrapper .pw-toggle{
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:1.2rem; line-height:1;
  padding:.25rem; border-radius:6px; opacity:.6; transition:opacity .15s;
}
.password-input-wrapper .toggle-password:hover,
.password-input-wrapper .pw-toggle:hover{ opacity:1; }
.password-input-wrapper .toggle-password:focus-visible,
.password-input-wrapper .pw-toggle:focus-visible{
  outline:2px solid var(--link-on-light); opacity:1;
}