/**
 * Theme · Steel
 * ═══════════════════════════════════════════════════════════════════════
 * Industrial cold gray-blue. Flat panels, tight metrics, accent-2 silver
 * edges, orange warning caps on numbered features. Think well-designed
 * desktop OS or machine control panel.
 * Identifier: data-theme="steel"
 *
 * Google Fonts needed (already loaded): Inter Tight, JetBrains Mono
 */

[data-theme="steel"] {
  --bg:           #1A1F2B;
  --bg-2:         #121620;
  --bg-elevated:  #22283A;

  --fg:           #D4DAE4;
  --fg-muted:     #7A8596;
  --fg-faint:     #525C6F;

  --accent:       #4A90E2;              /* electric blue */
  --accent-2:     #B8C4D6;              /* brushed silver */
  --accent-3:     #F57F17;              /* warning orange */

  --border:        rgba(212, 218, 228, 0.10);
  --border-strong: rgba(212, 218, 228, 0.25);
  --radius:        4px;
  --radius-sm:     2px;

  --font-display: 'Inter Tight', system-ui, sans-serif;
  --font-body:    'Inter Tight', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --display-weight:   700;
  --display-tracking: -0.03em;
  --display-leading:  1.0;

  --code-bg:       #0F131C;
  --code-fg:       #D4DAE4;
  --code-fg-muted: #7A8596;
  --code-border:   rgba(74, 144, 226, 0.18);
  --tok-keyword:   #4A90E2;
  --tok-string:    #8BB89A;
  --tok-func:      #F57F17;
  --tok-comment:   #525C6F;
  --tok-num:       #E8A87C;
  --tok-class:     #B8C4D6;
  --tok-self:      #8996A8;
  --tok-dec:       #F57F17;
  --tok-attr:      #B8C4D6;
}

/* Hero — precise and measured */
[data-theme="steel"] .hero-title em { color: var(--accent); font-style: italic; }
[data-theme="steel"] .hero-eyebrow {
  background: var(--bg-elevated); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 2px;
  font-family: var(--font-mono);
}
[data-theme="steel"] .hero-eyebrow::before { background: var(--accent); animation: none; }

/* Buttons — flat panels with bevel-like top border */
[data-theme="steel"] .btn {
  border-radius: 4px; font-weight: 600;
  letter-spacing: 0.02em; text-transform: none;
}
[data-theme="steel"] .btn-primary {
  background: var(--accent); color: #0F131C;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
[data-theme="steel"] .btn-ghost {
  background: var(--bg-elevated); border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="steel"] .btn-danger { background: var(--accent-3); color: #0F131C; }

/* Features — flat metal panels with rivet tick in corner */
[data-theme="steel"] .feature {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  position: relative;
}
[data-theme="steel"] .feature::before {
  content: ''; position: absolute;
  top: 12px; right: 12px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-3); opacity: 0.7;
  box-shadow: 0 0 4px var(--accent-3);
}
[data-theme="steel"] .feature:hover { border-color: var(--accent); }
[data-theme="steel"] .feature-num { font-family: var(--font-mono); color: var(--accent-3); letter-spacing: 0.1em; }
[data-theme="steel"] .feature-icon { color: var(--accent); }
[data-theme="steel"] .feature-title em { font-style: italic; color: var(--accent); }
[data-theme="steel"] .feature-tag {
  background: var(--bg); border: 1px solid var(--border-strong);
  color: var(--fg-muted); border-radius: 2px;
  font-family: var(--font-mono);
}

[data-theme="steel"] .section-title em { color: var(--accent); }
[data-theme="steel"] .section-label { color: var(--accent); }

/* Stats — instrument panel segmented display */
[data-theme="steel"] .stats-grid { border-radius: 4px; background: var(--border-strong); gap: 1px; }
[data-theme="steel"] .stat { background: var(--bg-elevated); position: relative; }
[data-theme="steel"] .stat::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  opacity: 0.25;
}
[data-theme="steel"] .stat:nth-child(1)::before { background: var(--accent); opacity: 1; }
[data-theme="steel"] .stat:nth-child(2)::before { background: var(--accent-3); opacity: 1; }
[data-theme="steel"] .stat:nth-child(3)::before { background: var(--accent-2); opacity: 1; }
[data-theme="steel"] .stat:nth-child(4)::before { background: var(--fg-muted); opacity: 1; }
[data-theme="steel"] .stat-num { color: var(--accent-2); }

/* Install — military hardware label */
[data-theme="steel"] .install-wrap {
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: 4px;
}
[data-theme="steel"] .install-wrap::before {
  content: 'SN: 0001-001'; position: absolute;
  top: 14px; right: 20px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--accent-3);
}
[data-theme="steel"] .install-cmd { background: #0F131C; border: 1px solid var(--border); border-radius: 2px; }
[data-theme="steel"] .install-cmd .prompt { color: var(--accent-3); }

[data-theme="steel"] .code-block { border-radius: 4px; }
[data-theme="steel"] .control-bar { background: rgba(18, 22, 32, 0.88); border-bottom: 1px solid var(--border); }
[data-theme="steel"] .chip { border-radius: 2px; background: var(--bg-elevated); border-color: var(--border); font-family: var(--font-mono); }
[data-theme="steel"] .chip.is-active { background: var(--accent); color: #0F131C; border-color: var(--accent); }
[data-theme="steel"] .brand-mark { color: var(--accent-2); }
[data-theme="steel"] .brand-mark sub { color: var(--accent-3); }

/* Tabs — segmented meter selector */
[data-theme="steel"] .tabs-list { border: 1px solid var(--border-strong); border-radius: 2px; background: var(--bg); gap: 0; padding: 0; }
[data-theme="steel"] .tab { border-radius: 0; border-right: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; }
[data-theme="steel"] .tab:last-child { border-right: none; }
[data-theme="steel"] .tab.is-active { background: var(--accent); color: #0F131C; border: none; border-top: 2px solid var(--accent-3); }

/* Gallery */
[data-theme="steel"] .gallery-card { border-radius: 4px; }
[data-theme="steel"] .input, [data-theme="steel"] .select, [data-theme="steel"] textarea.input {
  background: var(--bg); border-color: var(--border-strong); color: var(--fg);
  border-radius: 2px; font-family: var(--font-mono);
}
[data-theme="steel"] .input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
[data-theme="steel"] .alert { border-radius: 2px; border-left-width: 4px; background: var(--bg); }
[data-theme="steel"] .badge { border-radius: 2px; font-family: var(--font-mono); }
[data-theme="steel"] .data-table th { color: var(--accent); letter-spacing: 0.1em; }