/*
FILE: modes.css
RESPONSIBILITY: Mode-specific styling and visual differentiation
PHASE: B3 — ASSETS SKELETON
ROLE: Mode identity and theming

CRITICAL RULES:
✓ Mode-specific color schemes
✓ Visual differentiation per mode
✓ Typography variations per mode context
✗ NO structural layout (handled by layout.css)
✗ NO state logic (handled by state.js)
*/

/* ============================================================================
   MODE COLOR THEMES
   ============================================================================
   Purpose: Visual identity for each of the 8 modes
   Application: Applied via data-mode attribute on body
   ========================================================================= */

/* MODE 1: NEXUS — Brand Foundation */
body[data-mode="nexus"] {
    --mode-accent: var(--color-mode-nexus);
    --mode-accent-light: #6366F1;
    --mode-accent-dark: #3730A3;
}

/* MODE 2: OPERATIONS — Operational Excellence */
body[data-mode="operations"] {
    --mode-accent: var(--color-mode-operations);
    --mode-accent-light: #06B6D4;
    --mode-accent-dark: #0E7490;
}

/* MODE 3: SERVICES — Service Offerings */
body[data-mode="services"] {
    --mode-accent: var(--color-mode-services);
    --mode-accent-light: #10B981;
    --mode-accent-dark: #047857;
}

/* MODE 4: INDUSTRIES — Industry Focus */
body[data-mode="industries"] {
    --mode-accent: var(--color-mode-industries);
    --mode-accent-light: #EF4444;
    --mode-accent-dark: #B91C1C;
}

/* MODE 5: PROTOCOL — Methodology */
body[data-mode="protocol"] {
    --mode-accent: var(--color-mode-protocol);
    --mode-accent-light: #8B5CF6;
    --mode-accent-dark: #6D28D9;
}

/* MODE 6: TRUST — Trust & Security */
body[data-mode="trust"] {
    --mode-accent: var(--color-mode-trust);
    --mode-accent-light: #F97316;
    --mode-accent-dark: #C2410C;
}

/* MODE 7: ENGAGE — Engagement & Contact */
body[data-mode="engage"] {
    --mode-accent: var(--color-mode-engage);
    --mode-accent-light: #EC4899;
    --mode-accent-dark: #BE185D;
}

/* ============================================================================
   SIDE NAVIGATION — MODE-SPECIFIC ACTIVE STATES
   ============================================================================
   Purpose: Highlight active mode in navigation
   Behavior: Active nav item matches current mode accent color
   ========================================================================= */

/* Nexus active state */
body[data-mode="nexus"] .nav-item[data-mode="nexus"] {
    background-color: var(--mode-accent);
    color: var(--color-text-inverse);
}

/* Operations active state */
body[data-mode="operations"] .nav-item[data-mode="operations"] {
    background-color: var(--mode-accent);
    color: var(--color-text-inverse);
}

/* Services active state */
body[data-mode="services"] .nav-item[data-mode="services"] {
    background-color: var(--mode-accent);
    color: var(--color-text-inverse);
}

/* Industries active state */
body[data-mode="industries"] .nav-item[data-mode="industries"] {
    background-color: var(--mode-accent);
    color: var(--color-text-inverse);
}

/* Protocol active state */
body[data-mode="protocol"] .nav-item[data-mode="protocol"] {
    background-color: var(--mode-accent);
    color: var(--color-text-inverse);
}

/* Trust active state */
body[data-mode="trust"] .nav-item[data-mode="trust"] {
    background-color: var(--mode-accent);
    color: var(--color-text-inverse);
}

/* Engage active state */
body[data-mode="engage"] .nav-item[data-mode="engage"] {
    background-color: var(--mode-accent);
    color: var(--color-text-inverse);
}

/* ============================================================================
   MODE ZONE BACKGROUNDS — SUBTLE DIFFERENTIATION
   ============================================================================
   Purpose: Each mode has a unique background treatment
   Approach: Subtle accent tints on zone backgrounds
   ========================================================================= */

/* Nexus mode backgrounds */
#mode-nexus .zone-entry {
    background: linear-gradient(135deg, #FFFFFF 0%, #F5F3FF 100%);
}

#mode-nexus .zone-primary {
    background-color: #FAFAFA;
}

#mode-nexus .zone-deep {
    background: linear-gradient(135deg, #F3F4F6 0%, #EDE9FE 100%);
}

#mode-nexus .zone-closure {
    background-color: #FFFFFF;
}

/* Operations mode backgrounds */
#mode-operations .zone-entry {
    background: linear-gradient(135deg, #FFFFFF 0%, #ECFEFF 100%);
}

#mode-operations .zone-primary {
    background-color: #FAFAFA;
}

#mode-operations .zone-deep {
    background: linear-gradient(135deg, #F3F4F6 0%, #CFFAFE 100%);
}

#mode-operations .zone-closure {
    background-color: #FFFFFF;
}

/* Services mode backgrounds */
#mode-services .zone-entry {
    background: linear-gradient(135deg, #FFFFFF 0%, #ECFDF5 100%);
}

#mode-services .zone-primary {
    background-color: #FAFAFA;
}

#mode-services .zone-deep {
    background: linear-gradient(135deg, #F3F4F6 0%, #D1FAE5 100%);
}

#mode-services .zone-closure {
    background-color: #FFFFFF;
}

/* Industries mode backgrounds */
#mode-industries .zone-entry {
    background: linear-gradient(135deg, #FFFFFF 0%, #FEF2F2 100%);
}

#mode-industries .zone-primary {
    background-color: #FAFAFA;
}

#mode-industries .zone-deep {
    background: linear-gradient(135deg, #F3F4F6 0%, #FECACA 100%);
}

#mode-industries .zone-closure {
    background-color: #FFFFFF;
}

/* Protocol mode backgrounds */
#mode-protocol .zone-entry {
    background: linear-gradient(135deg, #FFFFFF 0%, #FAF5FF 100%);
}

#mode-protocol .zone-primary {
    background-color: #FAFAFA;
}

#mode-protocol .zone-deep {
    background: linear-gradient(135deg, #F3F4F6 0%, #E9D5FF 100%);
}

#mode-protocol .zone-closure {
    background-color: #FFFFFF;
}

/* Trust mode backgrounds */
#mode-trust .zone-entry {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF7ED 100%);
}

#mode-trust .zone-primary {
    background-color: #FAFAFA;
}

#mode-trust .zone-deep {
    background: linear-gradient(135deg, #F3F4F6 0%, #FFEDD5 100%);
}

#mode-trust .zone-closure {
    background-color: #FFFFFF;
}

/* Engage mode backgrounds */
#mode-engage .zone-entry {
    background: linear-gradient(135deg, #FFFFFF 0%, #FDF2F8 100%);
}

#mode-engage .zone-primary {
    background-color: #FAFAFA;
}

#mode-engage .zone-deep {
    background: linear-gradient(135deg, #F3F4F6 0%, #FBCFE8 100%);
}

#mode-engage .zone-closure {
    background-color: #FFFFFF;
}

/* ============================================================================
   TYPOGRAPHY — MODE-SPECIFIC HEADING TREATMENTS
   ============================================================================
   Purpose: Apply accent colors to headings within active mode
   Application: Automatically styles h1-h6 within mode zones
   ========================================================================= */

.mode-zone h1,
.mode-zone h2,
.mode-zone h3 {
    color: var(--mode-accent);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.mode-zone h1 {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--space-6);
}

.mode-zone h2 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-5);
}

.mode-zone h3 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-4);
    font-weight: var(--font-weight-semibold);
}

.mode-zone h4 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.mode-zone h5 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-3);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.mode-zone h6 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-3);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

/* Paragraph styling */
.mode-zone p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.mode-zone p.lead {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    margin-bottom: var(--space-6);
}

/* ============================================================================
   ACCENT ELEMENTS — BORDERS, HIGHLIGHTS, DECORATIONS
   ============================================================================
   Purpose: Mode-specific accent elements (borders, underlines, highlights)
   ========================================================================= */

.accent-border {
    border-color: var(--mode-accent);
}

.accent-border-top {
    border-top: 3px solid var(--mode-accent);
}

.accent-border-bottom {
    border-bottom: 3px solid var(--mode-accent);
}

.accent-border-left {
    border-left: 3px solid var(--mode-accent);
}

.accent-border-right {
    border-right: 3px solid var(--mode-accent);
}

.accent-background {
    background-color: var(--mode-accent);
    color: var(--color-text-inverse);
}

.accent-background-light {
    background-color: var(--mode-accent-light);
    color: var(--color-text-inverse);
}

.accent-text {
    color: var(--mode-accent);
}

/* Accent glow effect */
.accent-glow {
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
}

body[data-mode="nexus"] .accent-glow {
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
}

body[data-mode="operations"] .accent-glow {
    box-shadow: 0 0 20px rgba(8, 145, 178, 0.3);
}

body[data-mode="services"] .accent-glow {
    box-shadow: 0 0 20px rgba(5, 150, 105, 0.3);
}

body[data-mode="industries"] .accent-glow {
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.3);
}

body[data-mode="protocol"] .accent-glow {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

body[data-mode="trust"] .accent-glow {
    box-shadow: 0 0 20px rgba(234, 88, 12, 0.3);
}

body[data-mode="engage"] .accent-glow {
    box-shadow: 0 0 20px rgba(219, 39, 119, 0.3);
}

/* ============================================================================
   BUTTONS & INTERACTIVE ELEMENTS
   ============================================================================
   Purpose: Mode-specific button styling
   ========================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    text-decoration: none;
    border: var(--border-width-1) solid transparent;
}

.btn-primary {
    background-color: var(--mode-accent);
    color: var(--color-text-inverse);
    border-color: var(--mode-accent);
}

.btn-primary:hover {
    background-color: var(--mode-accent-dark);
    border-color: var(--mode-accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background-color: transparent;
    color: var(--mode-accent);
    border-color: var(--mode-accent);
}

.btn-secondary:hover {
    background-color: var(--mode-accent);
    color: var(--color-text-inverse);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-ghost {
    background-color: transparent;
    color: var(--mode-accent);
    border-color: transparent;
}

.btn-ghost:hover {
    background-color: var(--color-surface-tertiary);
}

/* Button sizes */
.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
}

/* ============================================================================
   CARDS & CONTENT BLOCKS
   ============================================================================
   Purpose: Reusable content containers with mode-specific accents
   ========================================================================= */

.card {
    background-color: var(--color-surface-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
    transition: all var(--duration-normal) var(--ease-out);
}

.card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.card-header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-width-2) solid var(--mode-accent);
}

.card-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--mode-accent);
    margin-bottom: var(--space-2);
}

.card-description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.card-body {
    margin-bottom: var(--space-6);
}

.card-footer {
    padding-top: var(--space-4);
    border-top: var(--border-width-1) solid var(--color-border-light);
}

/* ============================================================================
   LISTS — MODE-SPECIFIC STYLING
   ============================================================================
   Purpose: Styled lists with mode accent markers
   ========================================================================= */

.styled-list {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0;
}

.styled-list li {
    position: relative;
    padding-left: var(--space-8);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

.styled-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--mode-accent);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
}

/* ============================================================================
   RESPONSIVE TYPOGRAPHY ADJUSTMENTS
   ============================================================================
   Purpose: Scale typography for smaller screens
   ========================================================================= */

@media (max-width: 768px) {
    .mode-zone h1 {
        font-size: var(--font-size-4xl);
    }

    .mode-zone h2 {
        font-size: var(--font-size-3xl);
    }

    .mode-zone h3 {
        font-size: var(--font-size-2xl);
    }

    .mode-zone h4 {
        font-size: var(--font-size-xl);
    }

    .card {
        padding: var(--space-6);
    }
}

@media (max-width: 480px) {
    .mode-zone h1 {
        font-size: var(--font-size-3xl);
    }

    .mode-zone h2 {
        font-size: var(--font-size-2xl);
    }

    .card {
        padding: var(--space-4);
    }
}

/* ============================================================================
   END OF MODES.CSS
   ============================================================================
   
   CRITICAL VALIDATION:
   ✓ Mode-specific color themes defined (8 modes)
   ✓ Side-nav active state highlighting per mode
   ✓ Zone background differentiation per mode
   ✓ Typography with mode accent colors
   ✓ Reusable components (buttons, cards, lists)
   ✓ Responsive typography scaling
   ✗ NO structural layout (delegated to layout.css)
   ✗ NO state logic (delegated to state.js)
   
   Next Phase: C1 — state.js (JavaScript state management)
   ========================================================================= */