:root {
  --font-headline: "Segoe UI", "Microsoft YaHei UI", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --signature-gradient: linear-gradient(135deg, #a30012 0%, #d0021b 100%);
  --ghost-outline: rgba(231, 189, 184, 0.15);
  --glass-surface: rgba(247, 249, 255, 0.72);
}

html,
body {
  font-family: var(--font-body);
}

.material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1em;
  min-height: 1em;
  line-height: 1;
  font-style: normal;
  font-weight: 400;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "Noto Sans Symbols", "Arial Unicode MS", sans-serif;
  vertical-align: middle;
}

.glass-nav {
  background: var(--glass-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.industrial-gradient,
.btn-gradient,
.machined-gradient,
.signature-gradient {
  background: var(--signature-gradient);
}

.text-gradient {
  background: var(--signature-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ghost-border {
  border: 1px solid var(--ghost-outline);
}

.text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.text-shadow-subtle {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.asymmetric-grid {
  grid-template-columns: 1.2fr 0.8fr;
}