/**
 * @file plugins/themes/lumina/styles/foundation/foundation.bundle.css
 *
 * Copyright (c) 2026 Lumina Project contributors
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @brief Production flattened foundation bundle for Lumina Design System.
 *        Generated deterministically by Lumina build tooling.
 *        DO NOT EDIT DIRECTLY. Source modules remain in styles/foundation/ and styles/primitives/.
 */

/* ==========================================================================
   MODULE: styles/foundation/reset.css
   ========================================================================== */
html,
body {
    margin: 0;
    padding: 0;
}

/* Theme-wide normalization of form inputs to override OJS core defaults without !important */
body input[type="text"],
body input[type="search"],
body input[type="email"],
body input[type="password"],
body select,
body textarea {
    height: auto;
    min-height: auto;
    max-height: none;
    line-height: normal;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem; /* Comfortable default padding for clean visual baseline */
}

/* ==========================================================================
   MODULE: styles/foundation/tokens.css
   ========================================================================== */
:root {

    /* ==========================================================================
       SPACING TOKENS
       ========================================================================== */

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    /* ==========================================================================
       BORDER RADIUS SYSTEM
       ========================================================================== */

    --lm-radius-sm: 4px;
    --lm-radius-md: 6px;
    --lm-radius-lg: 8px;
    --lm-radius-xl: 12px;
    --lm-radius-full: 9999px;

    /* ==========================================================================
       SHADOW SYSTEM
       ========================================================================== */

    --lm-shadow-sm:
        0 1px 2px rgba(0, 0, 0, .05);

    --lm-shadow-md:
        0 4px 6px -1px rgba(0, 0, 0, .05),
        0 2px 4px -1px rgba(0, 0, 0, .03);

    --lm-shadow-lg:
        0 10px 15px -3px rgba(15, 23, 42, .08),
        0 4px 6px -2px rgba(15, 23, 42, .04);

    /*
     Header refinement support
     Editorial style shadow
    */

    --lm-shadow-header:
        0 1px 2px rgba(15, 23, 42, .04),
        0 6px 24px rgba(15, 23, 42, .06);

    /* ==========================================================================
       MOTION & INTERACTION SYSTEM (DECOMPOSED DOMAIN TAXONOMY)
       ========================================================================== */

    /* 1. Duration Tokens */
    --lm-duration-fast: 150ms;
    --lm-duration-normal: 250ms;
    --lm-duration-slow: 350ms;

    /* 2. Easing Curve Tokens */
    --lm-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --lm-ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);
    --lm-ease-decelerate: cubic-bezier(0.0, 0, 0.2, 1);

    /* 3. Composite Motion Shorthand Tokens (Backward Compatible Aliases) */
    --lm-ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
    --lm-motion-fast: var(--lm-duration-fast) var(--lm-ease-standard);
    --lm-motion-normal: var(--lm-duration-normal) var(--lm-ease-standard);
    --lm-motion-slow: var(--lm-duration-slow) var(--lm-ease-emphasized);

    /* 4. Semantic Surface Elevation & Lift Tokens */
    --lm-elevation-flat: translateY(0);
    --lm-elevation-sm: translateY(-1px);
    --lm-elevation-md: translateY(-2px);
    --lm-elevation-lg: translateY(-4px);
    --lm-interaction-lift-sm: var(--lm-elevation-sm);
    --lm-interaction-lift-md: var(--lm-elevation-md);
    --lm-interaction-lift-lg: var(--lm-elevation-lg);

    /* 5. Focus & State Domain Tokens */
    --lm-focus-ring: 2px solid var(--lm-primary, #2563eb);
    --lm-focus-offset: 2px;
    --lm-state-disabled-opacity: 0.5;
    --lm-state-hover-tint: rgba(var(--lm-primary-rgb, 37, 99, 235), 0.08);

    /* ==========================================================================
       TYPOGRAPHY SYSTEM
       ========================================================================== */

    --lm-font-sans:
        var(--lm-font-body, "Outfit", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

    --lm-font-heading-sans:
        var(--lm-font-heading, var(--lm-font-sans));

    --lm-font-size-xs: .75rem;
    --lm-font-size-sm: .875rem;
    --lm-font-size-base: 1rem;
    --lm-font-size-lg: 1.125rem;
    --lm-font-size-xl: 1.25rem;
    --lm-font-size-2xl: 1.5rem;
    --lm-font-size-3xl: 1.875rem;
    --lm-font-size-4xl: 2.25rem;
    --lm-font-size-5xl: 3rem;

    --lm-weight-normal: 400;
    --lm-weight-medium: 500;
    --lm-weight-semibold: 600;
    --lm-weight-bold: 700;
    --lm-weight-extrabold: 800;

    --lm-lh-tight: 1.25;
    --lm-lh-normal: 1.5;
    --lm-lh-relaxed: 1.625;

    /* ==========================================================================
       LAYOUT BOUNDARIES
       ========================================================================== */

    --lm-container-sm: 640px;
    --lm-container-md: 768px;
    --lm-container-lg: 1024px;
    --lm-container-xl: 1280px;

    --lm-content-width: 1280px;
    --lm-header-height: 90px;

    /* ==========================================================================
       ACCENT FALLBACK TOKENS
       NOTE: --lm-accent-* scale tokens (50 through 900) are EXCLUSIVELY owned
       by PaletteEngine via PaletteRegistry. Do NOT define any --lm-accent-*
       values here as they will override the active palette output.
       ========================================================================== */

    /* ==========================================================================
       LEGACY TOKEN ALIASING
       ========================================================================== */

    --lm-portal-font:
        var(--lm-font-sans);

    --lm-portal-radius:
        var(--lm-radius-md);

    --lm-portal-shadow-sm:
        var(--lm-shadow-sm);

    --lm-portal-shadow-md:
        var(--lm-shadow-md);

    --lm-portal-shadow-hover:
        var(--lm-shadow-lg);

    --lm-portal-transition:
        all var(--lm-motion-normal);

}

/* ==========================================================================
   MODULE: styles/foundation/interaction.css
   ========================================================================== */
:root {
    /* Centralized Interaction Motion & Physics Tokens */
    --lm-interaction-transition: transform var(--lm-duration-normal, 250ms) var(--lm-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)), 
                                 box-shadow var(--lm-duration-normal, 250ms) var(--lm-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)), 
                                 border-color var(--lm-duration-normal, 250ms) var(--lm-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)), 
                                 background-color var(--lm-duration-normal, 250ms) var(--lm-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)), 
                                 color var(--lm-duration-normal, 250ms) var(--lm-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));

    --lm-interaction-focus-ring: var(--lm-focus-ring, 2px solid var(--lm-primary, #2563eb));
    --lm-interaction-focus-offset: var(--lm-focus-offset, 2px);
}

html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   SCOPED INTERACTION BASELINES & GENERIC UTILITIES
   ========================================================================== */

.lumina_layout_wrapper,
.lm-zenith-container,
.lm-pinnacle-container,
.lm-vanguard-container,
.lumina_portal_wrapper {

    /* 1. Global Focus-Visible Physics */
    *:focus-visible {
        outline: var(--lm-interaction-focus-ring);
        outline-offset: var(--lm-interaction-focus-offset);
    }

    /* 2. Generic Elevation Utilities */
    .lm-elevation-sm {
        transform: var(--lm-elevation-sm);
    }

    .lm-elevation-md {
        transform: var(--lm-elevation-md);
    }

    .lm-elevation-lg {
        transform: var(--lm-elevation-lg);
    }

    /* 3. Interactive Card Elevation Utility */
    .lm-interactive-card {
        transition: var(--lm-interaction-transition);
    }

    .lm-interactive-card:hover {
        transform: var(--lm-elevation-md);
        box-shadow: var(--lm-shadow-md, 0 4px 6px rgba(0,0,0,0.1));
        border-color: var(--lm-primary);
    }

    .lm-interactive-card:active {
        transform: var(--lm-elevation-flat);
        box-shadow: var(--lm-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    }

    /* 4. Translucent Palette Hover Tint Utility */
    .lm-hover-tint {
        transition: var(--lm-interaction-transition);
    }

    .lm-hover-tint:hover {
        background-color: var(--lm-state-hover-tint, rgba(var(--lm-primary-rgb, 37, 99, 235), 0.08));
        color: var(--lm-link-hover);
    }

    /* 5. Disabled State Functional Axis Baseline */
    .disabled,
    :disabled,
    [aria-disabled="true"] {
        opacity: var(--lm-state-disabled-opacity, 0.5);
        cursor: not-allowed !important;
        pointer-events: none;
        transform: var(--lm-elevation-flat) !important;
        box-shadow: none !important;
    }
}

/* ==========================================================================
   5. ACCESSIBILITY REDUCED MOTION OVERRIDE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .lumina_layout_wrapper *,
    .lm-zenith-container *,
    .lm-pinnacle-container *,
    .lm-vanguard-container *,
    .lumina_portal_wrapper * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transform: none !important;
    }
}

/* ==========================================================================
   MODULE: styles/foundation/links.css
   ========================================================================== */
/* ==========================================================================
   PALETTE-AWARE LINK BASELINES
   ========================================================================== */

.lumina_layout_wrapper a:not(.lm-btn):not([class*="btn"]),
.lm-zenith-container a:not(.lm-btn):not([class*="btn"]),
.lm-pinnacle-container a:not(.lm-btn):not([class*="btn"]),
.lm-vanguard-container a:not(.lm-btn):not([class*="btn"]),
.lumina_portal_wrapper a:not(.lm-btn):not([class*="btn"]) {
    color: var(--lm-link);
    text-decoration: none;
    transition: var(--lm-interaction-transition, color 0.2s ease, transform 0.2s ease);
}

.lumina_layout_wrapper a:not(.lm-btn):not([class*="btn"]):hover,
.lm-zenith-container a:not(.lm-btn):not([class*="btn"]):hover,
.lm-pinnacle-container a:not(.lm-btn):not([class*="btn"]):hover,
.lm-vanguard-container a:not(.lm-btn):not([class*="btn"]):hover,
.lumina_portal_wrapper a:not(.lm-btn):not([class*="btn"]):hover {
    color: var(--lm-link-hover);
}

.lumina_layout_wrapper a:not(.lm-btn):not([class*="btn"]):active,
.lm-zenith-container a:not(.lm-btn):not([class*="btn"]):active,
.lm-pinnacle-container a:not(.lm-btn):not([class*="btn"]):active,
.lm-vanguard-container a:not(.lm-btn):not([class*="btn"]):active,
.lumina_portal_wrapper a:not(.lm-btn):not([class*="btn"]):active {
    color: var(--lm-primary-dark);
}

.lumina_layout_wrapper a:focus-visible,
.lm-zenith-container a:focus-visible,
.lm-pinnacle-container a:focus-visible,
.lm-vanguard-container a:focus-visible,
.lumina_portal_wrapper a:focus-visible {
    outline: var(--lm-interaction-focus-ring, 2px solid var(--lm-primary));
    outline-offset: var(--lm-interaction-focus-offset, 2px);
    border-radius: var(--lm-radius-xs, 2px);
}

/* Sub-icon animation inside interactive links (excluding buttons) */
.lumina_layout_wrapper a:not(.lm-btn):not([class*="btn"]):hover i,
.lm-zenith-container a:not(.lm-btn):not([class*="btn"]):hover i,
.lumina_portal_wrapper a:not(.lm-btn):not([class*="btn"]):hover i {
    transform: translateX(3px);
    transition: transform 0.2s ease;
}

/* ==========================================================================
   MODULE: styles/primitives/btn.css
   ========================================================================== */
/* ==========================================================================
   1. BASE BUTTON PRIMITIVE (.lm-btn)
   ========================================================================== */

.lm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs, 0.375rem);
    padding: 0.5rem 1rem;
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm, 0.875rem);
    font-weight: var(--lm-weight-semibold, 600);
    line-height: 1.25;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    border-radius: var(--lm-radius-sm, 6px);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    transition: var(--lm-interaction-transition, transform var(--lm-duration-fast, 150ms) var(--lm-ease-standard, ease), box-shadow var(--lm-duration-fast, 150ms) var(--lm-ease-standard, ease), border-color var(--lm-duration-fast, 150ms) var(--lm-ease-standard, ease), background-color var(--lm-duration-fast, 150ms) var(--lm-ease-standard, ease), color var(--lm-duration-fast, 150ms) var(--lm-ease-standard, ease));
}

.lm-btn:focus-visible {
    outline: var(--lm-focus-ring, 2px solid var(--lm-primary, #2563eb));
    outline-offset: var(--lm-focus-offset, 2px);
}

/* Functional Axis: Busy / Loading State */
.lm-btn.is-busy,
.lm-btn[aria-busy="true"] {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.lm-btn.is-busy::after,
.lm-btn[aria-busy="true"]::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: lm-btn-spin var(--lm-duration-slow, 600ms) linear infinite;
}

@keyframes lm-btn-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   2. BUTTON VARIANTS & DUAL-AXIS STATES
   ========================================================================== */

/* Primary Solid Button */
.lm-btn-primary {
    background-color: var(--lm-primary);
    color: var(--lm-text-inverse, #ffffff);
    border-color: var(--lm-primary);
    box-shadow: var(--lm-shadow-sm, 0 1px 3px rgba(var(--lm-primary-rgb, 37, 99, 235), 0.2));
}

.lm-btn-primary:hover {
    background-color: var(--lm-primary-dark, var(--lm-accent-700, #1d4ed8));
    border-color: var(--lm-primary-dark, var(--lm-accent-700, #1d4ed8));
    color: var(--lm-text-inverse, #ffffff);
    transform: var(--lm-elevation-md, translateY(-2px));
    box-shadow: var(--lm-shadow-md, 0 4px 6px rgba(0,0,0,0.12));
}

.lm-btn-primary:active,
.lm-btn-primary.is-pressed {
    transform: var(--lm-elevation-flat, translateY(0));
    box-shadow: var(--lm-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}

/* Secondary Button */
.lm-btn-secondary {
    background-color: var(--lm-surface-alt, #f3f4f6);
    color: var(--lm-text-primary, #111827);
    border-color: var(--lm-border, #e5e7eb);
}

.lm-btn-secondary:hover {
    background-color: var(--lm-surface-hover, #e5e7eb);
    border-color: var(--lm-border-dark, #d1d5db);
    color: var(--lm-text-primary, #111827);
    transform: translateY(-1px);
}

.lm-btn-secondary:active {
    transform: translateY(0);
}

/* Outline Button */
.lm-btn-outline {
    background-color: transparent;
    color: var(--lm-link);
    border-color: var(--lm-link);
}

.lm-btn-outline:hover {
    background-color: rgba(var(--lm-primary-rgb, 37, 99, 235), 0.08);
    color: var(--lm-link-hover);
    border-color: var(--lm-link-hover);
    transform: translateY(-1px);
}

.lm-btn-outline:active {
    transform: translateY(0);
}

/* Ghost Button */
.lm-btn-ghost {
    background-color: transparent;
    color: var(--lm-link);
    border-color: transparent;
}

.lm-btn-ghost:hover {
    background-color: rgba(var(--lm-primary-rgb, 37, 99, 235), 0.08);
    color: var(--lm-link-hover);
    transform: translateY(-1px);
}

.lm-btn-ghost:active {
    transform: translateY(0);
}

/* ==========================================================================
   3. BUTTON SIZE MODIFIERS
   ========================================================================== */

.lm-btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: var(--lm-font-size-xs, 0.8125rem);
    border-radius: var(--lm-radius-sm, 4px);
}

.lm-btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: var(--lm-font-size-base, 1rem);
    border-radius: var(--lm-radius-md, 8px);
}

.lm-btn-icon {
    padding: 0.35rem;
    width: 32px;
    height: 32px;
    border-radius: var(--lm-radius-sm, 4px);
}

/* ==========================================================================
   MODULE: styles/primitives/card.css
   ========================================================================== */
/* ==========================================================================
   1. BASE CARD PRIMITIVE (.lm-card)
   ========================================================================== */

.lm-card {
    background-color: var(--lm-surface-card, #ffffff);
    border-radius: var(--lm-radius-lg, 12px);
    border: 1px solid var(--lm-border, #e5e7eb);
    padding: var(--space-lg, 1.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: var(--lm-interaction-transition, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease);
}

/* ==========================================================================
   2. CARD VARIANTS
   ========================================================================== */

/* Flat Card (No border, subtle surface background) */
.lm-card-flat {
    background-color: var(--lm-surface-alt, #f8fafc);
    border-color: transparent;
}

/* Bordered Card (Clear outline) */
.lm-card-bordered {
    background-color: var(--lm-surface-card, #ffffff);
    border: 1px solid var(--lm-border-strong, #d1d5db);
}

/* Elevated Card (Static elevation shadow) */
.lm-card-elevated {
    background-color: var(--lm-surface-card, #ffffff);
    border-color: var(--lm-border, #e5e7eb);
    box-shadow: var(--lm-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.05));
}

/* Interactive Card (Hover lift physics + dynamic palette accent border) */
.lm-card-interactive {
    cursor: pointer;
}

.lm-card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--lm-shadow-lg, 0 10px 15px -3px rgba(15, 23, 42, 0.08));
    border-color: var(--lm-primary);
}

.lm-card-interactive:active {
    transform: translateY(0);
    box-shadow: var(--lm-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.lm-card-interactive:focus-within {
    outline: var(--lm-interaction-focus-ring, 2px solid var(--lm-primary));
    outline-offset: var(--lm-interaction-focus-offset, 2px);
}

/* ==========================================================================
   MODULE: styles/primitives/tabs.css
   ========================================================================== */
.lm-tab-nav {
    display: flex;
    gap: var(--space-xs, 0.375rem);
    align-items: center;
}

.lm-tab-btn {
    background-color: var(--lm-surface-alt, #f3f4f6);
    border: 1px solid var(--lm-border, #e5e7eb);
    padding: 0.35rem 0.75rem;
    border-radius: var(--lm-radius-sm, 6px);
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-xs, 0.75rem);
    font-weight: var(--lm-weight-semibold, 600);
    cursor: pointer;
    color: var(--lm-text-secondary, #4b5563);
    user-select: none;
    transition: var(--lm-interaction-transition, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease);
}

.lm-tab-btn:hover {
    background-color: var(--lm-surface-hover, #e5e7eb);
    color: var(--lm-text-primary, #111827);
    border-color: var(--lm-border-dark, #d1d5db);
}

.lm-tab-btn:focus-visible {
    outline: var(--lm-interaction-focus-ring, 2px solid var(--lm-primary));
    outline-offset: var(--lm-interaction-focus-offset, 2px);
}

.lm-tab-btn.is-active,
.lm-tab-btn.active {
    background-color: var(--lm-primary);
    color: var(--lm-text-inverse, #ffffff);
    border-color: var(--lm-primary);
}

.lm-tab-btn.is-active:hover,
.lm-tab-btn.active:hover {
    background-color: var(--lm-primary-dark);
    border-color: var(--lm-primary-dark);
    color: var(--lm-text-inverse, #ffffff);
}

/* ==========================================================================
   MODULE: styles/primitives/nav.css
   ========================================================================== */
/* ==========================================================================
   1. GENERIC NAVIGATION ITEM PRIMITIVE (.lm-nav-item)
   ========================================================================== */

.lm-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs, 0.5rem);
    padding: 0.5rem 0.75rem;
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm, 0.875rem);
    font-weight: var(--lm-weight-medium, 500);
    color: var(--lm-text-primary, #111827);
    text-decoration: none;
    border-radius: var(--lm-radius-sm, 6px);
    background-color: transparent;
    transition: var(--lm-interaction-transition, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease);
}

.lm-nav-item:hover {
    background-color: var(--lm-state-hover-tint, rgba(var(--lm-primary-rgb, 37, 99, 235), 0.08));
    color: var(--lm-link-hover);
    transform: translateX(4px);
}

.lm-nav-item:focus-visible {
    outline: var(--lm-focus-ring, 2px solid var(--lm-primary, #2563eb));
    outline-offset: var(--lm-focus-offset, 2px);
}

.lm-nav-item.is-active,
.lm-nav-item.active {
    background-color: var(--lm-state-hover-tint, rgba(var(--lm-primary-rgb, 37, 99, 235), 0.12));
    color: var(--lm-primary);
    font-weight: var(--lm-weight-semibold, 600);
}

/* Header Menu Item Indicator Variant */
.lm-nav-header-item {
    position: relative;
    display: inline-flex;
    padding: 0.5rem 0.75rem;
}

.lm-nav-header-item.is-active::after,
.lm-nav-header-item.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0.75rem;
    right: 0.75rem;
    height: 2px;
    background-color: var(--lm-primary);
    border-radius: 1px;
}

/* ==========================================================================
   2. SECTION GATEWAY & LINK CTA PRIMITIVE (.lm-nav-cta)
   ========================================================================== */

.lm-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm, 0.875rem);
    font-weight: var(--lm-weight-semibold, 600);
    color: var(--lm-link);
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: var(--lm-radius-sm, 6px);
    transition: var(--lm-interaction-transition, background-color 0.2s ease, color 0.2s ease);
}

.lm-nav-cta:hover {
    background-color: var(--lm-state-hover-tint, rgba(var(--lm-primary-rgb, 37, 99, 235), 0.08));
    color: var(--lm-link-hover);
}

.lm-nav-cta i,
.lm-nav-cta .lm-nav-arrow {
    display: inline-block;
    transition: transform var(--lm-duration-fast, 150ms) var(--lm-ease-standard, ease);
}

.lm-nav-cta:hover i,
.lm-nav-cta:hover .lm-nav-arrow {
    transform: translateX(4px);
}

.lm-nav-cta:focus-visible {
    outline: var(--lm-focus-ring, 2px solid var(--lm-primary, #2563eb));
    outline-offset: var(--lm-focus-offset, 2px);
}

/* ==========================================================================
   MODULE: styles/primitives/input.css
   ========================================================================== */
.lm-input,
.lm-select,
.lm-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--lm-font-sans);
    font-size: var(--lm-font-size-sm, 0.875rem);
    line-height: 1.4;
    color: var(--lm-text-primary, #111827);
    background-color: var(--lm-surface-card, #ffffff);
    border: 1px solid var(--lm-border, #d1d5db);
    border-radius: var(--lm-radius-sm, 6px);
    box-sizing: border-box;
    transition: var(--lm-interaction-transition, border-color 0.2s ease, box-shadow 0.2s ease);
}

.lm-input:hover,
.lm-select:hover,
.lm-textarea:hover {
    border-color: var(--lm-border-dark, #9ca3af);
}

.lm-input:focus,
.lm-select:focus,
.lm-textarea:focus,
.lm-input:focus-visible,
.lm-select:focus-visible,
.lm-textarea:focus-visible {
    outline: none;
    border-color: var(--lm-primary);
    box-shadow: 0 0 0 3px rgba(var(--lm-primary-rgb, 37, 99, 235), 0.15);
}

.lm-input.is-error,
.lm-input-error {
    border-color: var(--lm-danger, #ef4444);
}

.lm-input.is-error:focus,
.lm-input-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* ==========================================================================
   MODULE: styles/foundation/layout.css
   ========================================================================== */
/* ==========================================================================
   1. Page Layout Wrappers
   ========================================================================== */
.lumina_layout_wrapper {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    min-height: calc(100vh - var(--lm-header-height, 90px));
    display: flex;
    flex-direction: column;
}

.lumina_auth_layout {
    flex: 1;
}

.lumina_portal_wrapper,
.lumina_journal_wrapper {
    max-width: var(--lm-content-width);
    margin: 0 auto var(--space-xl) auto; /* Top margin zeroed to prevent double margin with header */
    padding: 0 var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

@media (min-width: 768px) {
    .lumina_portal_wrapper,
    .lumina_journal_wrapper {
        padding: 0 var(--space-lg);
        gap: var(--space-2xl);
    }
}

@media (min-width: 1024px) {
    .lumina_portal_wrapper,
    .lumina_journal_wrapper {
        padding: 0 var(--space-xl);
    }
}

/* Constrained content container */
.lumina_container_inner {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* ==========================================================================
   2. Responsive Grid Systems
   ========================================================================== */
.lumina_main_grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .lumina_main_grid.has_sidebar {
        grid-template-columns: 3fr 1fr;
        gap: var(--space-xl);
    }
}

/* Features Showcase and Search Grid templates */
.featured_journals_grid,
.discovery_listings_grid,
.highlights_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 640px) {
    .featured_journals_grid,
    .discovery_listings_grid,
    .highlights_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .featured_journals_grid,
    .discovery_listings_grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Statistics usage metrics grid */
.statistics_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 480px) {
    .statistics_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .statistics_grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }
}

/* Footer layout variations */
.lumina_footer_grid {
    display: grid;
    gap: var(--space-xl);
}

.lumina_footer_grid.columns {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.lumina_footer_grid.compact {
    grid-template-columns: 1fr;
    text-align: center;
}

.lumina_footer_grid.verbose {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .lumina_footer_grid.verbose {
        grid-template-columns: 1fr 2fr;
    }
}

/* ==========================================================================
   3. Common Layout & Flex Utilities
   ========================================================================== */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.flex-grow-1 { flex-grow: 1; }

.m-0 { margin: 0; }
.mt-auto { margin-top: auto; }
.w-100 { width: 100%; }
.box-sizing-border { box-sizing: border-box; }

/* ==========================================================================
   4. Legacy OJS Scaffold Resets (Normalized Layout Grid for Fallback Pages)
   ========================================================================== */
.pkp_structure_content {
    width: 100% !important;
    max-width: var(--lm-content-width, 1400px) !important;
    margin: 0 auto var(--space-xl, 40px) auto !important;
    padding: 0 var(--space-md, 16px) !important;
    padding-top: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-xl, 40px) !important;
    align-items: start !important;
}

@media (min-width: 1024px) {
    .pkp_structure_content {
        padding: 0 var(--space-xl, 40px) !important;
    }
    .pkp_structure_content.has_sidebar {
        grid-template-columns: minmax(0, 1fr) 320px !important;
    }
}

.pkp_structure_main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    float: none !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flow-root !important;
}

.pkp_structure_main::before,
.pkp_structure_main::after {
    display: none !important;
}

.pkp_structure_sidebar {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    grid-column: 1 !important;
}

@media (min-width: 1024px) {
    .pkp_structure_sidebar {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
}

/* ==========================================================================
   MODULE: styles/foundation/typography.css
   ========================================================================== */
/* ==========================================================================
   1. Base Body Defaults
   ========================================================================== */
body,
.lumina_layout_wrapper {
    font-family: var(--lm-font-body, var(--lm-font-sans));
    font-size: var(--lm-font-size-base);
    line-height: var(--lm-lh-normal);
    color: var(--lm-text-primary);
    background-color: var(--lm-surface-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   2. Hierarchical Headings & Component Titles
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
.lumina_layout_wrapper h1,
.lumina_layout_wrapper h2,
.lumina_layout_wrapper h3,
.lumina_layout_wrapper h4,
.lumina_layout_wrapper h5,
.lumina_layout_wrapper h6,
.lm-zenith-overview-title,
.hero-title,
.article-title,
.issue-title,
.sidebar-title,
.card-title,
.footer-title,
.section-title {
    font-family: var(--lm-font-heading, var(--lm-font-heading-sans));
}

.lumina_layout_wrapper h1,
.lumina_layout_wrapper h2,
.lumina_layout_wrapper h3,
.lumina_layout_wrapper h4,
.lumina_layout_wrapper h5,
.lumina_layout_wrapper h6 {
    color: var(--lm-text-primary);
    font-weight: var(--lm-weight-bold);
    line-height: var(--lm-lh-tight);
    margin-top: 0;
    margin-bottom: var(--space-sm);
    letter-spacing: -0.02em;
}

.lumina_layout_wrapper h1 {
    font-size: var(--lm-font-size-3xl);
    font-weight: var(--lm-weight-extrabold);
}

.lumina_layout_wrapper h2 {
    font-size: var(--lm-font-size-2xl);
}

.lumina_layout_wrapper h3 {
    font-size: var(--lm-font-size-xl);
}

.lumina_layout_wrapper h4 {
    font-size: var(--lm-font-size-lg);
}

.lumina_layout_wrapper h5 {
    font-size: var(--lm-font-size-sm);
}

@media (min-width: 768px) {
    .lumina_layout_wrapper h1 { font-size: var(--lm-font-size-4xl); }
    .lumina_layout_wrapper h2 { font-size: var(--lm-font-size-3xl); }
    .lumina_layout_wrapper h3 { font-size: var(--lm-font-size-2xl); }
    .lumina_layout_wrapper h4 { font-size: var(--lm-font-size-xl); }
}

/* ==========================================================================
   3. Paragraphs & Rhythms
   ========================================================================== */
.lumina_layout_wrapper p {
    margin-top: 0;
    margin-bottom: var(--space-md);
    line-height: var(--lm-lh-relaxed);
    color: var(--lm-text-secondary);
}

.lumina_layout_wrapper p:last-child {
    margin-bottom: 0;
}

.lumina_layout_wrapper small {
    font-size: var(--lm-font-size-xs);
    color: var(--lm-text-muted);
}

.lumina_layout_wrapper code {
    font-family: var(--lm-font-mono, monospace);
    font-size: 0.9em;
    background-color: var(--lm-surface-muted);
    padding: 2px 4px;
    border-radius: var(--lm-radius-sm);
}

/* ==========================================================================
   4. Links Defaults
   ========================================================================== */
.lumina_layout_wrapper a {
    color: var(--lm-link);
    text-decoration: none;
    transition: color var(--lm-motion-fast);
}

.lumina_layout_wrapper a:hover {
    color: var(--lm-link-hover);
    text-decoration: underline;
}

/* Helper styles for text colors */
.text-primary { color: var(--lm-text-primary); }
.text-secondary { color: var(--lm-text-secondary); }
.text-muted { color: var(--lm-text-muted); }
.text-inverse { color: var(--lm-text-inverse); }