/*
 * ============================================================================
 * Copyright (c) 2026 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: base.css
 * @TITLE: PATHWRITE
 * @DESCRIPTION: Global element defaults - body typography/colour baseline and default link styling. Load after reset.css, before layout.css.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.3
 * - File Modified | Ary van der Pijl | 2026-08-06 | PATHWRITE brand style guide rollout: h1-h6 (plus the brand wordmark text spans) now render in Montserrat per the guide's "Headings: Montserrat Bold" spec - body text stays Inter. Added .brand-mark-light/.brand-mark-dark toggle (theme-reactive logo swap - light-bg logo mark shown by default, dark-bg mark shown under [data-theme="dark"]), used by the sidebar/auth/brochure logo placements. |
 * VERSION 1.0.2
 * - File Modified | Ary van der Pijl | 2026-08-06 | Phase 24: added a 150ms background-colour/colour transition on body so switching dark/light mode fades instead of snapping instantly, and the [data-ui-mode="beginner"] rule that hides [data-advanced-only] elements for the new progressive-disclosure preference. |
 * VERSION 1.0.1
 * - File Modified | Ary van der Pijl | 2026-08-06 | Added a page-load fade-in on .app-content/.auth-card/.brochure-main (this is a multi-page app with full page loads, not a client-side router, so "view transition" maps to a fade on each fresh page load) and a global prefers-reduced-motion override - no animation in the app respected it (Phase 21 micro-interactions audit). |
 * VERSION 1.0.0
 * + File Created | Ary van der Pijl | 2026-08-06 | Extracted from main.css as part of the Phase 17 CSS architecture split (9-file hierarchy per STD-E). |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition-base), color var(--transition-base);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover);
}

/* ─── Headings ────────────────────────────────────────────────────────────── */
/* Style guide: "Headings: Montserrat Bold" - body text stays Inter. */

h1, h2, h3, h4, h5, h6,
.sidebar-logo-text, .auth-logo-name, .brochure-logo {
  font-family: var(--font-heading);
}

/* ─── Theme-reactive logo mark ───────────────────────────────────────────── */
/* Light-bg surfaces (auth card, brochure nav) show the light-mark by default; */
/* dark-bg surfaces (sidebar) never use this toggle - they hardcode the dark mark. */

.brand-mark-dark {
  display: none;
}

[data-theme="dark"] .brand-mark-light {
  display: none;
}

[data-theme="dark"] .brand-mark-dark {
  display: block;
}

/* ─── Page load transition ───────────────────────────────────────────────── */
/* Full page loads (no client-side router), so "view transition" is a fade on each fresh load. */

#main-content, .auth-container {
  animation: page-fade-in .15s ease;
}

@keyframes page-fade-in {
  from { opacity: 0; }
}

/* ─── Progressive disclosure (beginner/advanced) ─────────────────────────── */

[data-ui-mode="beginner"] [data-advanced-only] {
  display: none !important;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}