/**

 * NeuraRealty Core CSS

 * Variables, resets, typography, icon system

 * NeuraWeb Global Inc.

 */



/* ============================================

   CSS VARIABLES

   ============================================ */

:root {

    /* Brand Colors */

    --nr-primary: #1B4D3E;

    --nr-primary-light: #2A6B54;

    --nr-primary-dark: #0F3328;

    --nr-accent: #D4A574;

    

    /* Semantic Colors */

    --nr-success: #22C55E;

    --nr-warning: #F59E0B;

    --nr-danger: #EF4444;

    --nr-info: #3B82F6;

    

    /* Background Colors */

    --nr-bg-primary: #FAFAF9;

    --nr-bg-secondary: #F5F5F4;

    --nr-bg-tertiary: #E7E5E4;

    --nr-bg-card: #FFFFFF;

    

    /* Text Colors */

    --nr-text-primary: #1C1917;

    --nr-text-secondary: #57534E;

    --nr-text-muted: #A8A29E;

    --nr-text-inverse: #FFFFFF;

    

    /* Border */

    --nr-border: #E7E5E4;

    --nr-border-focus: #1B4D3E;

    

    /* Gradients */

    --nr-gradient-hero: linear-gradient(135deg, #1B4D3E 0%, #2A6B54 50%, #1B4D3E 100%);

    --nr-gradient-accent: linear-gradient(135deg, #D4A574 0%, #C4956A 100%);

    

    /* Shadows */

    --nr-shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04);

    --nr-shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);

    --nr-shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.08), 0 2px 4px -2px rgba(28, 25, 23, 0.04);

    --nr-shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -4px rgba(28, 25, 23, 0.04);

    --nr-shadow-xl: 0 20px 25px -5px rgba(28, 25, 23, 0.1), 0 8px 10px -6px rgba(28, 25, 23, 0.04);

    

    /* Typography */

    --font-display: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    

    /* Spacing */

    --nr-space-xs: 4px;

    --nr-space-sm: 8px;

    --nr-space-md: 16px;

    --nr-space-lg: 24px;

    --nr-space-xl: 32px;

    --nr-space-2xl: 48px;

    --nr-space-3xl: 64px;

    

    /* Border Radius */

    --nr-radius-xs: 4px;

    --nr-radius-sm: 6px;

    --nr-radius-md: 10px;

    --nr-radius-lg: 16px;

    --nr-radius-xl: 24px;

    --nr-radius-full: 9999px;

    

    /* Transitions */

    --nr-transition-fast: 150ms ease;

    --nr-transition-base: 200ms ease;

    --nr-transition-slow: 300ms ease;

    

    /* Z-Index Scale */

    --nr-z-dropdown: 100;

    --nr-z-sticky: 200;

    --nr-z-modal-backdrop: 900;

    --nr-z-modal: 1000;

    --nr-z-tooltip: 1100;

}



/* ============================================

   RESET & BASE

   ============================================ */

*, *::before, *::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    font-size: 16px;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



body {

    font-family: var(--font-body);

    font-size: 15px;

    line-height: 1.6;

    color: var(--nr-text-primary);

    background: var(--nr-bg-primary);

}



/* ============================================

   TYPOGRAPHY

   ============================================ */

h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-display);

    font-weight: 600;

    line-height: 1.3;

    color: var(--nr-text-primary);

}



h1 { font-size: 32px; font-weight: 700; }

h2 { font-size: 24px; font-weight: 600; }

h3 { font-size: 20px; font-weight: 600; }

h4 { font-size: 18px; font-weight: 600; }

h5 { font-size: 16px; font-weight: 600; }

h6 { font-size: 14px; font-weight: 600; }



p { margin-bottom: 1em; }

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



a {

    color: var(--nr-primary);

    text-decoration: none;

    transition: color var(--nr-transition-fast);

}



a:hover {

    color: var(--nr-primary-dark);

}



/* ============================================

   GLYPHFORGE ICON SYSTEM

   ============================================ */



/* Base icon - renders as current text color (black by default) */

.gf-icon {

    display: inline-block;

    vertical-align: middle;

    flex-shrink: 0;

    filter: brightness(0) saturate(100%);

}



/* White icons - for dark backgrounds */

.gf-icon-white {

    filter: brightness(0) saturate(100%) invert(1);

}



/* Primary color icons */

.gf-icon-primary {

    filter: brightness(0) saturate(100%) invert(23%) sepia(15%) saturate(1500%) hue-rotate(115deg) brightness(95%) contrast(90%);

}



/* Accent color icons */

.gf-icon-accent {

    filter: brightness(0) saturate(100%) invert(72%) sepia(25%) saturate(500%) hue-rotate(350deg) brightness(95%) contrast(90%);

}



/* Success color icons */

.gf-icon-success {

    filter: brightness(0) saturate(100%) invert(61%) sepia(52%) saturate(501%) hue-rotate(93deg) brightness(96%) contrast(89%);

}



/* Danger color icons */

.gf-icon-danger {

    filter: brightness(0) saturate(100%) invert(41%) sepia(95%) saturate(1355%) hue-rotate(336deg) brightness(100%) contrast(91%);

}



/* Muted icons - for secondary/disabled states */

.gf-icon-muted {

    filter: brightness(0) saturate(100%) invert(70%) sepia(5%) saturate(200%) hue-rotate(15deg) brightness(95%) contrast(90%);

    opacity: 0.7;

}



/* Icon inside labels - ensure proper alignment */

label .gf-icon,

.nr-label .gf-icon {

    margin-right: 6px;

    opacity: 0.7;

}



/* Icon buttons */

button .gf-icon,

.nr-btn .gf-icon {

    margin-right: 6px;

}



button .gf-icon:only-child,

.nr-btn .gf-icon:only-child {

    margin-right: 0;

}



/* ============================================

   UTILITY CLASSES

   ============================================ */

.nr-hidden { display: none !important; }

.nr-invisible { visibility: hidden; }

.nr-sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    border: 0;

}



/* Text utilities */

.nr-text-center { text-align: center; }

.nr-text-left { text-align: left; }

.nr-text-right { text-align: right; }

.nr-text-muted { color: var(--nr-text-muted); }

.nr-text-primary { color: var(--nr-primary); }

.nr-text-success { color: var(--nr-success); }

.nr-text-danger { color: var(--nr-danger); }

.nr-text-mono { font-family: var(--font-mono); }

.nr-text-truncate {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



/* Flex utilities */

.nr-flex { display: flex; }

.nr-flex-col { flex-direction: column; }

.nr-items-center { align-items: center; }

.nr-justify-center { justify-content: center; }

.nr-justify-between { justify-content: space-between; }

.nr-gap-xs { gap: var(--nr-space-xs); }

.nr-gap-sm { gap: var(--nr-space-sm); }

.nr-gap-md { gap: var(--nr-space-md); }

.nr-gap-lg { gap: var(--nr-space-lg); }



/* Spacing utilities */

.nr-mt-0 { margin-top: 0; }

.nr-mt-sm { margin-top: var(--nr-space-sm); }

.nr-mt-md { margin-top: var(--nr-space-md); }

.nr-mt-lg { margin-top: var(--nr-space-lg); }

.nr-mb-0 { margin-bottom: 0; }

.nr-mb-sm { margin-bottom: var(--nr-space-sm); }

.nr-mb-md { margin-bottom: var(--nr-space-md); }

.nr-mb-lg { margin-bottom: var(--nr-space-lg); }



/* ============================================

   CONTAINER

   ============================================ */

.nr-container {

    width: 100%;

    max-width: 1600px;

    margin: 0 auto;

    padding: 0 var(--nr-space-lg);

}



.nr-container-sm { max-width: 900px; }

.nr-container-md { max-width: 1200px; }

.nr-container-lg { max-width: 1400px; }



/* ============================================

   MAIN CONTENT AREA

   ============================================ */

.nr-main {

    min-height: calc(100vh - 72px - 200px);

    padding: var(--nr-space-xl) 0;

}



.nr-section {

    margin-bottom: var(--nr-space-2xl);

}



.nr-section:last-child {

    margin-bottom: 0;

}