:root {
  --ic-color-ink: #111317;
  --ic-color-ink-soft: #434a56;
  --ic-color-muted: #727b88;
  --ic-color-orange: #f57a1f;
  --ic-color-orange-strong: #df6510;
  --ic-color-orange-soft: #f2cfb4;
  --ic-color-bg: #f7f4ef;
  --ic-color-bg-soft: #efe9df;
  --ic-color-surface: #ffffff;
  --ic-color-border: #ddd4c7;
  --ic-color-shadow: rgba(17, 19, 23, 0.08);
  --ic-radius-sm: 6px;
  --ic-radius-md: 12px;
  --ic-radius-lg: 16px;
  --ic-space-1: 4px;
  --ic-space-2: 8px;
  --ic-space-3: 12px;
  --ic-space-4: 16px;
  --ic-space-5: 20px;
  --ic-space-6: 24px;

  /* Legacy variable mapping for current pages */
  --bg: var(--ic-color-bg);
  --bg2: var(--ic-color-bg-soft);
  --surface: var(--ic-color-surface);
  --surface2: #fff3e8;
  --border: var(--ic-color-border);
  --border2: #cfc4b4;
  --text: var(--ic-color-ink);
  --text2: var(--ic-color-ink-soft);
  --text3: var(--ic-color-muted);
  --ink: var(--ic-color-ink);
  --ink2: var(--ic-color-ink-soft);
  --ink3: var(--ic-color-muted);
  --card: var(--ic-color-surface);
  --line: var(--ic-color-border);
  --muted: var(--ic-color-muted);
  --accent: var(--ic-color-orange);
  --accent2: #ffa160;
  --accentbg: #fff1e4;
  --accent-dark: var(--ic-color-orange-strong);
}

body {
  background: var(--bg);
  color: var(--text);
}

nav {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 8px 26px var(--ic-color-shadow);
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-dark);
}

.ic-logo-image {
  display: block;
  width: auto;
  height: 60px;
  max-width: 320px;
  filter: drop-shadow(0 10px 18px rgba(17, 19, 23, 0.12));
}

.logo {
  color: var(--text) !important;
}

.logo span {
  color: var(--accent) !important;
}

.logo-mark,
.logo-icon {
  display: none !important;
}

.btn-nav-publish,
.btn-primary,
button.btn-main {
  background: var(--accent) !important;
  color: #1a1a1a !important;
}

.btn-nav-publish:hover,
.btn-primary:hover,
button.btn-main:hover {
  background: var(--accent-dark) !important;
  color: #111 !important;
}

.btn-secondary,
.btn-ghost,
.btn-outline {
  border-color: var(--border) !important;
}

.btn-secondary:hover,
.btn-ghost:hover,
.btn-outline:hover {
  border-color: var(--accent) !important;
}

input,
select,
textarea {
  border-color: var(--border);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

.table-wrap,
.card,
.form-card,
.publish-card,
.dir-card,
.company-card,
.need-card,
.radar-card,
.login-wrap {
  border-color: var(--border);
  box-shadow: 0 8px 24px var(--ic-color-shadow);
}

footer {
  color: var(--text2);
}

.badge,
.role-badge {
  border-color: var(--border);
}

.role-badge.role-founder,
.badge-founder {
  background: linear-gradient(135deg, #ffe7d3, #f2cfb4);
  color: #7b3e04;
}

@media (max-width: 768px) {
  .ic-logo-image {
    height: 48px;
  }
}