/**
 * Niemeyer Design System
 *
 * Bold Architectural Minimalism inspired by Oscar Niemeyer's Brasilia architecture
 * and mid-century modernist travel posters.
 *
 * Core Identity:
 * - Bold orange field as primary hero area
 * - Cream/off-white for content areas
 * - Brown for architectural shapes and text
 * - Pure CSS geometric shapes (no images)
 */

:root {
    /* ========================================
       CORE PALETTE
       ======================================== */

    /* Primary Orange - Hero backgrounds, accents, CTAs */
    --nm-orange: #E85D04;
    --nm-orange-dark: #D14D00;
    --nm-orange-light: rgba(232, 93, 4, 0.08);
    --nm-orange-hover: rgba(232, 93, 4, 0.05);
    --nm-orange-border: rgba(232, 93, 4, 0.3);

    /* Cream - Secondary backgrounds, text on orange */
    --nm-cream: #FAF7F2;
    --nm-cream-transparent: rgba(250, 247, 242, 0.9);
    --nm-cream-border: rgba(250, 247, 242, 0.2);
    --nm-cream-muted: rgba(250, 247, 242, 0.6);

    /* Brown - Architectural shapes, headings, primary text */
    --nm-brown: #3D2914;
    --nm-brown-light: #6B4423;
    --nm-brown-border: rgba(61, 41, 20, 0.1);
    --nm-brown-border-strong: rgba(61, 41, 20, 0.2);
    --nm-brown-muted: rgba(61, 41, 20, 0.6);

    /* ========================================
       SEMANTIC COLORS
       ======================================== */

    /* Status Colors */
    --nm-success: #10B981;
    --nm-success-light: rgba(16, 185, 129, 0.1);
    --nm-success-dark: #059669;

    --nm-warning: #E85D04;
    --nm-warning-light: rgba(232, 93, 4, 0.1);

    --nm-danger: #C41E3A;
    --nm-danger-light: rgba(196, 30, 58, 0.1);
    --nm-danger-border: #DC2626;

    --nm-info: #3B82F6;
    --nm-info-light: rgba(59, 130, 246, 0.1);

    /* Tier Colors */
    --nm-tier-marquee: #7C3AED;
    --nm-tier-medium: #3B82F6;
    --nm-tier-small: #10B981;
    --nm-tier-committee: #57534E;
    --nm-tier-series: #B45309;

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

    /* Font Family */
    --nm-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font Weights */
    --nm-font-light: 300;
    --nm-font-regular: 400;
    --nm-font-medium: 500;

    /* Font Sizes - Based on mockup analysis */
    --nm-text-hero: 48px;      /* Large stat numbers */
    --nm-text-display: 32px;   /* Page titles */
    --nm-text-title: 18px;     /* Section headers, month names */
    --nm-text-large: 16px;     /* Input text, emphasis */
    --nm-text-body: 14px;      /* Body text, buttons */
    --nm-text-small: 13px;     /* Secondary text, nav items */
    --nm-text-micro: 11px;     /* Labels, badges, uppercase meta */

    /* Line Heights */
    --nm-line-tight: 1.25;
    --nm-line-normal: 1.5;
    --nm-line-relaxed: 1.625;

    /* Letter Spacing */
    --nm-tracking-tight: -0.02em;   /* Large display text */
    --nm-tracking-normal: 0;
    --nm-tracking-wide: 0.05em;     /* Logo, subtle emphasis */
    --nm-tracking-widest: 0.1em;    /* Uppercase labels */

    /* ========================================
       SPACING SCALE (8px base grid)
       ======================================== */

    --nm-space-0: 0;
    --nm-space-1: 4px;
    --nm-space-2: 8px;
    --nm-space-3: 12px;
    --nm-space-4: 16px;
    --nm-space-5: 20px;
    --nm-space-6: 24px;
    --nm-space-8: 32px;
    --nm-space-10: 40px;
    --nm-space-12: 48px;
    --nm-space-16: 64px;

    /* Layout-specific spacing */
    --nm-page-padding: 48px;
    --nm-section-gap: 48px;
    --nm-card-padding: 24px;
    --nm-item-gap: 16px;

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

    /* Container widths */
    --nm-max-width: 1200px;
    --nm-max-width-narrow: 1000px;
    --nm-max-width-wide: 1400px;

    /* Hero section */
    --nm-hero-height: 50vh;
    --nm-hero-min-height: 400px;

    /* Sidebar */
    --nm-sidebar-width: 240px;
    --nm-settings-nav-width: 200px;

    /* ========================================
       BORDERS & SHADOWS
       ======================================== */

    /* Border Radius - Architectural (mostly sharp) */
    --nm-radius-none: 0;
    --nm-radius-sm: 0;          /* Cards, buttons - sharp corners */
    --nm-radius-md: 0;          /* Inputs - sharp */
    --nm-radius-full: 9999px;   /* Circles only (toggle, dots) */

    /* Shadows - Minimal, warm-tinted */
    --nm-shadow-none: none;
    --nm-shadow-sm: 0 1px 2px rgba(61, 41, 20, 0.05);
    --nm-shadow-md: 0 2px 4px rgba(61, 41, 20, 0.06);
    --nm-shadow-lg: 0 4px 8px rgba(61, 41, 20, 0.08);

    /* Borders */
    --nm-border-light: 1px solid var(--nm-brown-border);
    --nm-border-medium: 1px solid var(--nm-brown-border-strong);
    --nm-border-strong: 2px solid var(--nm-brown);
    --nm-border-accent: 3px solid var(--nm-orange);

    /* ========================================
       TRANSITIONS
       ======================================== */

    --nm-transition-fast: 0.15s ease;
    --nm-transition-normal: 0.2s ease;
    --nm-transition-slow: 0.3s ease;

    /* ========================================
       Z-INDEX SCALE
       ======================================== */

    --nm-z-base: 0;
    --nm-z-dropdown: 10;
    --nm-z-sticky: 20;
    --nm-z-modal-backdrop: 40;
    --nm-z-modal: 50;
    --nm-z-toast: 100;

    /* ========================================
       COMPONENT-SPECIFIC TOKENS
       ======================================== */

    /* Buttons */
    --nm-btn-height-sm: 32px;
    --nm-btn-height-md: 38px;
    --nm-btn-height-lg: 44px;
    --nm-btn-padding-x: 24px;
    --nm-btn-padding-x-sm: 16px;

    /* Form Inputs */
    --nm-input-height: 44px;
    --nm-input-padding: 12px 16px;

    /* Toggle Switch */
    --nm-toggle-width: 48px;
    --nm-toggle-height: 24px;
    --nm-toggle-dot-size: 20px;

    /* Progress Bar */
    --nm-progress-height: 4px;
    --nm-progress-height-lg: 8px;

    /* Architectural Shapes - Hero Scale (matched to mockup) */
    --nm-shape-tower-width: 52px;
    --nm-shape-tower-height: 180px;
    --nm-shape-dome-width: 100px;
    --nm-shape-dome-height: 64px;
    --nm-shape-wedge-size: 100px;
    --nm-shape-bar-width: 120px;
    --nm-shape-bar-height: 28px;

    /* Architectural Shapes - Table Scale */
    --nm-tier-icon-size: 40px;
    --nm-tier-tower-width: 8px;
    --nm-tier-tower-height: 32px;
    --nm-tier-dome-width: 24px;
    --nm-tier-dome-height: 12px;
    --nm-tier-wedge-size: 28px;
    --nm-tier-bar-width: 32px;
    --nm-tier-bar-height: 6px;

    /* Sun/Moon Element */
    --nm-sun-size: 60px;

    /* Horizon Line */
    --nm-horizon-height: 1px;
    --nm-reflection-height: 120px;
}

/* ========================================
   BASE STYLES
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.nm-theme {
    font-family: var(--nm-font-family);
    font-size: var(--nm-text-body);
    font-weight: var(--nm-font-regular);
    line-height: var(--nm-line-normal);
    color: var(--nm-brown);
    background: var(--nm-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Text Colors */
.nm-text-orange { color: var(--nm-orange); }
.nm-text-cream { color: var(--nm-cream); }
.nm-text-brown { color: var(--nm-brown); }
.nm-text-brown-light { color: var(--nm-brown-light); }
.nm-text-success { color: var(--nm-success); }
.nm-text-danger { color: var(--nm-danger); }

/* Background Colors */
.nm-bg-orange { background: var(--nm-orange); }
.nm-bg-cream { background: var(--nm-cream); }
.nm-bg-white { background: white; }
.nm-bg-brown { background: var(--nm-brown); }

/* Text Styles */
.nm-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--nm-tracking-widest);
}

.nm-font-light { font-weight: var(--nm-font-light); }
.nm-font-regular { font-weight: var(--nm-font-regular); }
.nm-font-medium { font-weight: var(--nm-font-medium); }

/* Opacity */
.nm-opacity-50 { opacity: 0.5; }
.nm-opacity-60 { opacity: 0.6; }
.nm-opacity-90 { opacity: 0.9; }

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus states */
.nm-theme *:focus-visible {
    outline: 2px solid var(--nm-orange);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .nm-theme *,
    .nm-theme *::before,
    .nm-theme *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    :root {
        --nm-brown-border: rgba(61, 41, 20, 0.3);
        --nm-brown-muted: rgba(61, 41, 20, 0.8);
    }
}