:root {
  /* 🌍 GLOBAL THEME BASE */
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

html, body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

:root {
  /* Layout dimensions */
  --nona-header-height-small: calc(100vh / 24); /* 约140px */
  --nona-header-height-large: calc(100vh / 9.3); /* 约180px */
  --nona-header-height: var(--nona-header-height-small); /* 默认值 */
  --nona-nav-width: calc(100vw / 8);
  --nona-type-selection-height: calc(100vh / 25);
  --nona-step-progress-height: calc(100vh / 25);
  --bottom-toolbar-height: calc(100vh / 35);
  /* --nona-project-name-height: calc(100vh / 18); */
  --nona-project-name-height: 0px;
  --nona-guide-height: calc(100vw / 6.5);
  --section-header-height: 50px;
  --guide-content-height: 38%;
  --dropdown-width: calc(100vw / 10);
  --assistant-width-expanded: calc(100vw / 5);
  --assistant-width-collapsed: 0px;  /* ISSUE_3500: Collapsed width - completely hidden */
  --assistant-current-width: var(--assistant-width-collapsed);  /* ISSUE_3500: Dynamic width - defaults to collapsed */
  --assistant-total-height: calc(100vh * 1 / 10);
  --nona-nav-color-active: rgb(0, 54, 129);

  --nav-width-expanded: calc(100vw / 6.8);
  --nav-width-collapsed: 60px;

  /* DESIGN_51: Responsive Content Layout System */
  /* Content max-width values for different screen sizes */
  --content-max-width-ultra: 2200px;      /* 4K+ screens (2560px+) */
  --content-max-width-large: 1800px;      /* 2K screens (1920px-2559px) - Wide content */
  --content-max-width-standard: 1400px;   /* Standard desktop (1440px-1919px) - Default */
  --content-max-width-narrow: 1000px;     /* Narrow content (forms, settings) */
  --content-max-width-small: 100%;        /* Small screens (<1440px) - full width */

  /* Default max-width (standard desktop) */
  --content-max-width: var(--content-max-width-standard);

  /* Content padding (horizontal) */
  --content-padding-x: 32px;

  /* Content available width (viewport minus nav and assistant) */
  --content-available-width: calc(
    100vw - var(--nona-nav-width) - var(--assistant-current-width)
  );

  /* BUILDER LAYOUT CONVENTION: Content inner width percentage
   * All builder pages use 90% of available width with centered layout
   * Creates 5% margin on left and right sides for visual breathing room
   * See: issues/ISSUE_BUILDER_90_PERCENT_CONTENT_WIDTH_LAYOUT.md */
  --content-inner-width-percentage: 90%;

  --color-bg-hover: rgb(233, 247, 251);
  --color-blue-active: #dceeff;

  /* Calculated heights */
  --assistant-content-height: calc(
    100vh - var(--nona-header-height) - var(--nona-project-name-height)
  );
  --nona-navigation-bar-height: calc(
    100vh - var(--nona-header-height) - var(--nona-type-selection-height)
  );

  /* Base colors */
  --color-text: rgb(0, 54, 129);
  --color-active: rgb(0, 54, 129);
  --color-icon: rgb(0, 54, 129);
  --color-border: #e5e7eb;
  --color-bg-active: rgb(236, 244, 255);
  --color-bg-hover: rgb(233, 247, 251);

  /* 🎯 UNIFIED BRAND COLORS - Single Source of Truth */
  --brand-primary: #003b71;               /* Main brand blue - equivalent to rgb(0, 54, 129) */
  --brand-primary-dark: #021b36;          /* Banner top layer, deep accents */
  --brand-primary-light: #0066cc;         /* Interactive elements, links */
  --brand-primary-hover: #0056b3;         /* Hover states, button interactions */

  /* 🎨 UNIFIED COLOR SYSTEM - PHASE 1 Complete Color Palette (Single Source of Truth) */
  
  /* Primary Colors - Brand Palette */
  --color-primary: #003b71;                    /* Main brand blue - nav bar, assistant section, execute section */
  --color-primary-dark: #021b36;               /* Dark brand (banners, strong accents) */
  --color-primary-hover: #0056b3;              /* Hover state */
  
  /* Text Colors - Semantic */
  --color-text-primary: #212529;               /* Main text */
  --color-text-secondary: #6c757d;             /* Secondary text */
  --color-text-muted: #868e96;                 /* Muted text */
  --color-text-inverse: #ffffff;               /* Text on dark backgrounds */
  
  /* Interactive Colors */
  --color-interactive: var(--color-primary);           /* Links, interactive elements */
  --color-interactive-hover: var(--color-primary-hover);/* Hover state */
  
  /* Neutral Colors - Gray Scale (50-900) */
  --color-neutral-50: #fafafa;                 /* Lightest gray */
  --color-neutral-100: #f3f4f6;                /* Very light gray */
  --color-neutral-200: #e5e7eb;                /* Light gray (borders) */
  --color-neutral-300: #d1d5db;                /* Medium-light gray */
  --color-neutral-400: #9ca3af;                /* Medium gray */
  --color-neutral-500: #6b7280;                /* Medium-dark gray */
  --color-neutral-600: #4b5563;                /* Dark gray */
  --color-neutral-700: #374151;                /* Very dark gray */
  --color-neutral-800: #1f2937;                /* Darkest gray */
  --color-neutral-900: #111827;                /* Almost black */
  
  /* Background Colors */
  --color-bg-primary: #ffffff;                 /* Primary background */
  --color-bg-secondary: #f8f9fa;               /* Secondary background */
  --color-bg-tertiary: #e9ecef;                /* Tertiary background */
  --color-bg-hover: rgb(233, 247, 251);        /* Hover background */
  --color-bg-active: rgb(236, 244, 255);       /* Active background */
  
  /* Status Colors */
  --color-success: #28a745;                    /* Success (green) */
  --color-warning: #ffc107;                    /* Warning (yellow) */
  --color-error: #dc3545;                      /* Error (red) */
  --color-info: #0066cc;                       /* Info (blue) */
  
  /* Border Colors */
  --color-border-light: #e5e7eb;               /* Light borders */
  --color-border-medium: #dee2e6;              /* Medium borders */
  --color-border-focus: var(--color-primary);  /* Focus borders (uses primary brand color) */
  --color-border-error: #dc3545;               /* Error borders */
  
  /* Interactive States */
  --color-focus: rgba(0, 59, 113, 0.1);       /* Focus color with transparency (primary brand with 10% opacity) */
  --color-disabled-bg: #f3f4f6;                /* Disabled background */
  --color-disabled-text: #9ca3af;              /* Disabled text */
  
  /* SEMANTIC COLOR APPLICATIONS (Legacy - kept for backward compatibility) */
  --text-heading: var(--color-primary);        /* Section titles, card headers */
  --text-label: var(--color-primary);          /* Form labels, input labels */
  --text-interactive: var(--color-primary);    /* Links, interactive text */
  --border-accent: var(--color-primary);       /* Section underlines, card borders */
  --border-interactive: var(--color-primary);  /* Focus borders, active borders */

  /* 📝 TYPOGRAPHY SYSTEM - Single Source of Truth */
  
  /* Font Families */
  --font-system: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --font-monospace: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
  --font-serif: 'Georgia', 'Cambria', serif;
  
  /* Font Sizes - Standard Scale */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.5rem;       /* 24px */
  --font-size-2xl: 2rem;        /* 32px */
  --font-size-3xl: 2.5rem;      /* 40px */
  
  /* Navigation Text (legacy, use --font-size-base) */
  --font-size-nav-text: 15px;
  --font-weight-nav-text: 500;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* Legacy line height names (for backward compatibility) */
  --leading-tight: var(--line-height-tight);
  --leading-normal: var(--line-height-normal);
  --leading-relaxed: var(--line-height-relaxed);
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  
  /* Legacy font size names (for backward compatibility) */
  --text-xs: var(--font-size-xs);
  --text-sm: var(--font-size-sm);
  --text-base: var(--font-size-base);
  --text-lg: var(--font-size-lg);
  --text-xl: var(--font-size-xl);
  --text-2xl: var(--font-size-2xl);
  
  /* Legacy font weights (for backward compatibility) */
  --font-normal: var(--font-weight-normal);
  --font-medium: var(--font-weight-medium);
  --font-semibold: var(--font-weight-semibold);
  --font-bold: var(--font-weight-bold);

  /* Theme colors */
  --color-teal-base: rgb(76, 169, 158);

  /* Purple Theme */
  --color-purple-base: #e6e6fa;
  --color-purple-light: #e6e6fa;
  --color-purple-lighter: #f0f0ff;
  --color-purple-hover: #f5f5fe;
  --color-purple-active: #dcdcf5;
  --color-purple-selected: #d8d8f0;

  /* Blue Theme */
  --color-blue-base: #e6f3ff;
  --color-blue-light: #e6f3ff;
  --color-blue-lighter: #f0f9ff;
  --color-blue-hover: #f5faff;
  --color-blue-active: #dceeff;
  --color-blue-selected: #d8ebff;

  /* Yellow Theme */
  --color-yellow-base: #fff8e6;
  --color-yellow-light: #fff8e6;
  --color-yellow-lighter: #fffaf0;
  --color-yellow-hover: #fffcf5;
  --color-yellow-active: #fff5dc;
  --color-yellow-selected: #fff2d8;

  /* 📏 SPACING SYSTEM - 8px Base Unit */
  --spacing-xs: calc(var(--spacing-unit) * 0.5);   /* 4px */
  --spacing-sm: var(--spacing-unit);               /* 8px */
  --spacing-base: calc(var(--spacing-unit) * 2);   /* 16px */
  --spacing-lg: calc(var(--spacing-unit) * 3);     /* 24px */
  --spacing-xl: calc(var(--spacing-unit) * 4);     /* 32px */
  --spacing-2xl: calc(var(--spacing-unit) * 5);    /* 40px */

  /* Border System */
  --border-radius: 4px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --spacing-unit: 8px;

  /* 🎭 SHADOW SYSTEM */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
  --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.2);

  /* 🎨 INTERFACE COLORS */
  --interface-bg: #ffffff;
  --interface-bg-secondary: #f8f9fa;
  --text-primary: #2c3e50;
  --text-muted: #7f8c8d;

  /* Accent Colors for Split Card System */
  --accent-analytical: var(--color-blue-light);    /* #e6f3ff - Light blue for analytical widgets */
  --accent-action: var(--color-yellow-light);      /* #fff8e6 - Light yellow for action widgets */

  /* Transitions */
  --transition-time: 0.3s;
  --row-transition: all 0.3s ease;
  --dropdown-transition: all 0.2s ease;
  --arrow-transition: transform 0.2s ease;

  /* ✨ VISUAL FUSION TOKENS - newhome aesthetic integration */
  --fusion-primary-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.6) 0%, rgba(37, 99, 235, 0.6) 100%);
  --fusion-primary-glow: 0 0 20px rgba(59, 130, 246, 0.4);
  --fusion-glass-bg: rgba(255, 255, 255, 0.03);
  --fusion-glass-border: 1px solid rgba(255, 255, 255, 0.1);
  --fusion-blur: blur(12px);
  --fusion-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --fusion-text-glow: 0 0 8px rgba(255, 255, 255, 0.3);
  --fusion-card-bg: rgba(255, 255, 255, 0.03);
  --fusion-header-bg: rgba(255, 255, 255, 0.02);
  --fusion-title-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

  /* Theme-specific Fusion Gradients */
  --fusion-teal-gradient: linear-gradient(135deg, rgba(64, 157, 146, 0.6) 0%, rgba(45, 110, 102, 0.6) 100%);
  --fusion-purple-gradient: linear-gradient(135deg, rgba(167, 139, 250, 0.6) 0%, rgba(139, 92, 246, 0.6) 100%);
  --fusion-yellow-gradient: linear-gradient(135deg, rgba(251, 191, 36, 0.8) 0%, rgba(245, 158, 11, 0.8) 100%);
  --fusion-blue-gradient: var(--fusion-primary-gradient);
}

/* Media Queries
@media screen and (max-height: 400px) {
  :root {
    --nona-header-height: calc(100vh / 10);
  }
}

@media screen and (min-height: 1200px) {
  :root {
    --nona-header-height: calc(100vh / 15);
  }
} */

/* 🌓 LIGHT THEME - Color Overrides */
:root[data-user-color-scheme="light"],
.light-theme {
  --color-text-primary: #212529;
  --color-text-secondary: #6c757d;
  --color-text-muted: #868e96;
  --color-text-inverse: #ffffff;
  
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #e9ecef;
  
  --color-neutral-text: #212529;
  --color-neutral-border: #e5e7eb;

  /* Fusion Overrides for Light Mode */
  --fusion-glass-bg: rgba(0, 54, 129, 0.03);
  --fusion-glass-border: 1px solid rgba(0, 54, 129, 0.1);
  --fusion-header-bg: rgba(0, 54, 129, 0.02);
}

/* 🌓 DARK THEME - Color Overrides */
:root[data-user-color-scheme="dark"],
body:not(.light-theme) {
  --color-text-primary: #e5e7eb;
  --color-text-secondary: #9ca3af;
  --color-text-muted: #6b7280;
  --color-text-inverse: #ffffff;
  
  --color-bg-primary: #0a0e14;                  /* Deeper, more tech-focused black */
  --color-bg-secondary: #111827;
  --color-bg-tertiary: #0f172a;
  
  --color-neutral-text: #e5e7eb;
  --color-neutral-border: #374151;

  /* Dark Theme Semantic Overrides */
  --color-text: #e5e7eb;
  --color-active: #60a5fa;
  --color-icon: #9ca3af;
  --color-bg-hover: rgba(255, 255, 255, 0.08);
  --color-bg-active: rgba(59, 130, 246, 0.2);
  --color-border: rgba(255, 255, 255, 0.15);

  /* Fusion Overrides for Dark Mode */
  --nona-sidebar-bg: #111827;                  /* Solid dark background for sidebar to prevent light bleeding */
  --nona-sidebar-blur: blur(20px);
  --nona-sidebar-border: rgba(255, 255, 255, 0.1);
  --nona-sidebar-active-glow: rgba(59, 130, 246, 0.3);

  --fusion-glass-bg: rgba(17, 24, 39, 0.7);    /* Darker glass background */
  --fusion-glass-border: 1px solid rgba(255, 255, 255, 0.1);
  --fusion-header-bg: rgba(17, 24, 39, 0.9);
}

/* 📚 Z-INDEX SYSTEM - UNIFIED STACKING HIERARCHY */
:root {
  /* Z-Index Scale - Clear Component Layering */
  --z-hide: -1;                      /* Hidden/off-screen elements */
  --z-auto: auto;                    /* Default browser behavior */
  --z-base: 0;                       /* Normal document flow */
  
  /* Component Layers - 10-Level Hierarchy */
  --z-dropdown: 1000;                /* Dropdown menus */
  --z-sticky: 1020;                  /* Sticky headers/footers */
  --z-fixed: 1030;                   /* Fixed positioning */
  --z-modal-backdrop: 1040;          /* Modal/overlay background */
  --z-modal: 1050;                   /* Modal content/dialogs */
  --z-popover: 1060;                 /* Popovers/submenus */
  --z-tooltip: 1070;                 /* Tooltips/hints */
  --z-notification: 1080;            /* Toast notifications/alerts */
  
  /* Special Layers - Always on Top */
  --z-assistant: 1000000;            /* Assistant panel (always visible) */
}

/* 📏 SPACING SYSTEM - UNIFIED 8px BASE UNIT SCALE */
:root {
  /* Spacing Scale - 8px Base Unit */
  --spacing-0: 0;                      /* 0px - No spacing */
  --spacing-1: 0.25rem;                /* 4px - Extra tight */
  --spacing-2: 0.5rem;                 /* 8px - Tight (BASE UNIT) */
  --spacing-3: 0.75rem;                /* 12px */
  --spacing-4: 1rem;                   /* 16px - Default */
  --spacing-5: 1.25rem;                /* 20px */
  --spacing-6: 1.5rem;                 /* 24px */
  --spacing-8: 2rem;                   /* 32px */
  --spacing-10: 2.5rem;                /* 40px */
  --spacing-12: 3rem;                  /* 48px */
  --spacing-16: 4rem;                  /* 64px */
  --spacing-20: 5rem;                  /* 80px */
  
  /* Semantic Spacing Aliases */
  --gap-xs: var(--spacing-2);          /* 8px - Extra tight spacing */
  --gap-sm: var(--spacing-3);          /* 12px - Small spacing */
  --gap-md: var(--spacing-4);          /* 16px - Medium spacing (default) */
  --gap-lg: var(--spacing-6);          /* 24px - Large spacing */
  --gap-xl: var(--spacing-8);          /* 32px - Extra large spacing */
  --gap-2xl: var(--spacing-12);        /* 48px - Double large spacing */
  --gap-3xl: var(--spacing-16);        /* 64px - Triple large spacing */
  
  /* Component-Specific Padding */
  --padding-btn: var(--spacing-3) var(--spacing-4);        /* 12px 16px - Buttons */
  --padding-input: var(--spacing-2) var(--spacing-3);      /* 8px 12px - Inputs */
  --padding-card: var(--spacing-4) var(--spacing-6);       /* 16px 24px - Cards */
  --padding-card-lg: var(--spacing-6) var(--spacing-8);    /* 24px 32px - Large cards */
  --padding-section: var(--spacing-6) var(--spacing-8);    /* 24px 32px - Sections */
  --padding-modal: var(--spacing-6);                       /* 24px - Modal content */
  --padding-dropdown: var(--spacing-2);                    /* 8px - Dropdown items */
  
  /* Component-Specific Margins */
  --margin-block: var(--spacing-4);                        /* 16px - Block margin */
  --margin-block-sm: var(--spacing-2);                     /* 8px - Small block margin */
  --margin-block-lg: var(--spacing-6);                     /* 24px - Large block margin */
  --margin-inline: var(--spacing-6);                       /* 24px - Inline margin */
  --margin-inline-sm: var(--spacing-3);                    /* 12px - Small inline margin */
  --margin-inline-lg: var(--spacing-8);                    /* 32px - Large inline margin */
}

/* ========================================
 * ISSUE_3500: Assistant Section Dynamic Width Control
 * Controls assistant width based on collapsed state
 * ======================================== */

/* Expanded state: Assistant is visible */
body:not(.assistant-collapsed) {
  --assistant-current-width: var(--assistant-width-expanded);
}

/* Collapsed state: Assistant is hidden */
body.assistant-collapsed {
  --assistant-current-width: var(--assistant-width-collapsed);
}