/* =========================================================
   NeuralDrill Design System — Colors & Typography
   ========================================================= */

:root {
  /* ── PRIMARY PALETTE ── */
  --nd-orange:             rgb(255, 137, 37);
  --nd-orange-hover:       rgb(235, 120, 25);
  --nd-orange-light:       rgba(255, 137, 37, 0.08);
  --nd-orange-medium:      rgba(255, 137, 37, 0.20);

  --nd-blue:               rgb(65, 105, 224);
  --nd-blue-hover:         rgb(50, 88, 200);
  --nd-blue-light:         rgba(65, 105, 224, 0.08);
  --nd-blue-glow:          rgba(65, 105, 224, 0.40);

  /* ── BACKGROUND COLORS ── */
  --nd-bg-app:             rgb(242, 242, 242);
  --nd-bg-panel:           #ffffff;
  --nd-bg-table:           #ffffff;
  --nd-bg-control:         rgb(250, 250, 250);
  --nd-bg-header:          rgb(250, 250, 250);

  /* ── BORDER & DIVIDER ── */
  --nd-border-panel:       rgb(217, 217, 217);
  --nd-border-table:       rgb(230, 230, 230);
  --nd-border-width:       0.5px;

  /* ── TEXT COLORS ── */
  --nd-text-primary:       rgb(28, 28, 30);
  --nd-text-secondary:     rgb(108, 108, 112);
  --nd-text-tertiary:      rgb(174, 174, 178);
  --nd-text-on-accent:     #ffffff;

  /* ── SEMANTIC COLORS ── */
  --nd-success:            rgb(52, 199, 89);
  --nd-warning:            rgb(255, 149, 0);
  --nd-error:              rgb(255, 59, 48);
  --nd-info:               rgb(65, 105, 224);
  --nd-teal:               rgb(0, 166, 166);

  /* ── BHA ELEMENT COLORS ── */
  /* Drilling tools (orange family) */
  --nd-bha-bit:            rgb(255, 40, 0);
  --nd-bha-motor:          rgb(255, 114, 0);
  --nd-bha-rss:            rgb(255, 140, 0);
  --nd-bha-underreamer:    rgb(255, 89, 0);
  --nd-bha-mills:          rgb(242, 133, 0);
  /* Measurement (blue family) */
  --nd-bha-mwd:            rgb(65, 105, 224);
  --nd-bha-lwd:            rgb(51, 90, 204);
  --nd-bha-crossover:      rgb(77, 115, 230);
  /* Drill string (gray family) */
  --nd-bha-collar:         rgb(102, 102, 102);
  --nd-bha-hwdp:           rgb(140, 140, 140);
  --nd-bha-pipe:           rgb(166, 166, 166);
  /* Support */
  --nd-bha-stabilizer:     rgb(128, 128, 128);
  --nd-bha-jar:            rgb(255, 114, 0);
  --nd-bha-shocksub:       rgb(255, 102, 0);
  --nd-bha-generic:        rgb(153, 153, 153);
  /* Borehole elements */
  --nd-borehole-openhole:  rgb(255, 137, 37);
  --nd-borehole-casing:    rgb(65, 105, 224);
  --nd-borehole-liner:     rgb(166, 166, 166);
  --nd-borehole-mud:       rgb(255, 137, 37);

  /* ── SHADOWS ── */
  --nd-shadow-panel:       0 1px 2px rgba(0, 0, 0, 0.05);
  --nd-shadow-button:      0 1px 1px rgba(0, 0, 0, 0.10);
  --nd-shadow-print:       0 2px 3px rgba(65, 105, 224, 0.40);
  --nd-shadow-drag:        0 0 4px rgba(0, 0, 0, 0.15);

  /* ── CORNER RADII ── */
  --nd-radius-panel:       8px;
  --nd-radius-btn-primary: 6px;
  --nd-radius-btn-secondary: 5px;
  --nd-radius-icon:        6px;

  /* ── SPACING ── */
  --nd-space-section:      20px;
  --nd-space-element:      8px;
  --nd-space-element-lg:   12px;
  --nd-space-panel-pad:    12px;
  --nd-space-propwin-pad:  20px;
  --nd-space-label-w:      120px;

  /* ── LAYOUT ── */
  --nd-sidebar-width:      350px;
  --nd-sidebar-compact:    220px;
  --nd-min-window-w:       1280px;
  --nd-min-window-h:       800px;
  --nd-icon-size:          50px;
  --nd-icon-label-w:       60px;

  /* ── TYPOGRAPHY ── */
  --nd-font-family:        -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  --nd-font-mono:          "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --nd-font-size-xs:       9px;
  --nd-font-size-sm:       10px;
  --nd-font-size-caption:  11px;
  --nd-font-size-button:   12px;
  --nd-font-size-body:     13px;
  --nd-font-size-header:   13px;
  --nd-font-size-title:    15px;
  --nd-font-size-title-lg: 15.6px;

  --nd-font-weight-regular: 400;
  --nd-font-weight-medium:  500;
  --nd-font-weight-semibold: 600;

  /* ── TRANSITIONS ── */
  --nd-transition-hover:   all 0.15s ease-in-out;
  --nd-transition-layout:  all 0.2s ease-in-out;
}

/* ── BASE TYPOGRAPHY ── */

body {
  font-family: var(--nd-font-family);
  font-size: var(--nd-font-size-body);
  font-weight: var(--nd-font-weight-regular);
  color: var(--nd-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── SEMANTIC TYPE CLASSES ── */

.nd-panel-header {
  font-size: var(--nd-font-size-header);
  font-weight: var(--nd-font-weight-semibold);
  color: var(--nd-text-primary);
}

.nd-section-title {
  font-size: var(--nd-font-size-title);
  font-weight: var(--nd-font-weight-semibold);
  color: var(--nd-text-primary);
}

.nd-section-title-lg {
  font-size: var(--nd-font-size-title-lg);
  font-weight: var(--nd-font-weight-semibold);
  color: var(--nd-text-primary);
}

.nd-body {
  font-size: var(--nd-font-size-body);
  font-weight: var(--nd-font-weight-regular);
  color: var(--nd-text-primary);
}

.nd-caption {
  font-size: var(--nd-font-size-caption);
  font-weight: var(--nd-font-weight-regular);
  color: var(--nd-text-secondary);
}

.nd-label {
  font-size: var(--nd-font-size-sm);
  font-weight: var(--nd-font-weight-regular);
  color: var(--nd-text-secondary);
}

.nd-mono {
  font-family: var(--nd-font-mono);
  font-size: var(--nd-font-size-body);
  font-weight: var(--nd-font-weight-regular);
}

.nd-button-text {
  font-size: var(--nd-font-size-button);
  font-weight: var(--nd-font-weight-medium);
}

/* ── COMPONENT CLASSES ── */

.nd-panel {
  background: var(--nd-bg-panel);
  border-radius: var(--nd-radius-panel);
  border: var(--nd-border-width) solid var(--nd-border-panel);
  box-shadow: var(--nd-shadow-panel);
}

.nd-panel-hdr {
  font-size: var(--nd-font-size-header);
  font-weight: var(--nd-font-weight-semibold);
  padding: 8px var(--nd-space-panel-pad);
  background: var(--nd-bg-header);
  border-bottom: var(--nd-border-width) solid var(--nd-border-panel);
}

.nd-btn-primary {
  font-size: var(--nd-font-size-button);
  font-weight: var(--nd-font-weight-medium);
  color: var(--nd-text-on-accent);
  background: var(--nd-orange);
  border: none;
  border-radius: var(--nd-radius-btn-primary);
  padding: 6px 16px;
  box-shadow: var(--nd-shadow-button);
  cursor: pointer;
  transition: var(--nd-transition-hover);
}
.nd-btn-primary:hover {
  background: var(--nd-orange-hover);
}
.nd-btn-primary:active {
  opacity: 0.8;
}

.nd-btn-secondary {
  font-size: var(--nd-font-size-button);
  font-weight: var(--nd-font-weight-medium);
  color: var(--nd-text-primary);
  background: var(--nd-bg-panel);
  border: var(--nd-border-width) solid var(--nd-border-panel);
  border-radius: var(--nd-radius-btn-secondary);
  padding: 5px 12px;
  cursor: pointer;
  transition: var(--nd-transition-hover);
}
.nd-btn-secondary:hover {
  border-color: var(--nd-text-secondary);
}
.nd-btn-secondary:active {
  opacity: 0.8;
}

.nd-btn-print {
  font-size: var(--nd-font-size-button);
  font-weight: var(--nd-font-weight-medium);
  color: var(--nd-text-on-accent);
  background: var(--nd-blue);
  border: none;
  border-radius: var(--nd-radius-btn-primary);
  padding: 6px 16px;
  box-shadow: var(--nd-shadow-print);
  cursor: pointer;
  transition: var(--nd-transition-hover);
}
.nd-btn-print:hover {
  background: var(--nd-blue-hover);
}
.nd-btn-print:active {
  opacity: 0.8;
}