: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);
  /* --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-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;

  --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 */

  /* 🎨 SEMANTIC COLOR APPLICATIONS */
  --text-heading: var(--brand-primary);        /* Section titles, card headers */
  --text-label: var(--brand-primary);          /* Form labels, input labels */
  --text-interactive: var(--brand-primary);    /* Links, interactive text */
  --border-accent: var(--brand-primary);       /* Section underlines, card borders */
  --border-interactive: var(--brand-primary);  /* Focus borders, active borders */

  /* 📝 TYPOGRAPHY SYSTEM */
  --font-system: Arial, sans-serif;            /* Standard system font */
  --font-size-nav-text: 15px;                  /* Navigation text size for section headers */
  --font-weight-nav-text: 500;                 /* Navigation text weight for section headers */

  /* Typography Scale */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.5rem;       /* 24px */
  --text-2xl: 2rem;        /* 32px */

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

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

  /* 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;
}

/* 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);
  }
} */