/* Influvine brand guide reference page */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  background: oklch(0.985 0.004 90);
  color: oklch(0.22 0.01 90);
}
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; margin: 0; }
p { margin: 0; }

.page { max-width: 1180px; margin: 0 auto; padding: 56px 32px 120px; }
.section { margin-bottom: 88px; }
.section:last-child { margin-bottom: 0; }
.section-label {
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: oklch(0.55 0.18 290);
}
.section-intro {
  font-size: 15px; line-height: 1.65; color: oklch(0.45 0.012 90);
  margin-top: 10px; max-width: 640px;
}

.brand-row { display: flex; align-items: center; gap: 12px; }
.wordmark { font: 600 20px 'Space Grotesk', sans-serif; letter-spacing: -0.01em; }
.wordmark-lg { font-size: 34px; letter-spacing: -0.015em; }
.wordmark-md { font-size: 26px; letter-spacing: -0.015em; }
.brand-grad {
  background: linear-gradient(135deg, oklch(0.62 0.19 270), oklch(0.6 0.19 330));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cover-title { font-size: 46px; letter-spacing: -0.02em; margin-top: 28px; max-width: 680px; }
.cover-lead { font-size: 16px; line-height: 1.6; color: oklch(0.5 0.01 90); margin-top: 14px; max-width: 600px; }

.card-shadow { box-shadow: 0 1px 2px oklch(0.2 0.02 260 / 0.04), 0 12px 32px oklch(0.2 0.02 260 / 0.06); }

.lockup-primary {
  margin-top: 36px;
  background: #fff;
  border-radius: 18px;
  padding: 48px;
  box-shadow: 0 1px 2px oklch(0.2 0.02 260 / 0.04), 0 12px 32px oklch(0.2 0.02 260 / 0.06);
  display: flex; align-items: center; justify-content: center; gap: 16px;
}

.variant-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.variant-card {
  background: #fff; border-radius: 16px; padding: 32px;
  box-shadow: 0 1px 2px oklch(0.2 0.02 260 / 0.04), 0 12px 32px oklch(0.2 0.02 260 / 0.06);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.variant-card-dark { background: oklch(0.13 0.018 265); box-shadow: none; }
.variant-card-gradient { background: linear-gradient(135deg, oklch(0.68 0.19 265), oklch(0.65 0.19 330)); box-shadow: none; }
.variant-label { font: 500 11.5px 'IBM Plex Sans', sans-serif; color: oklch(0.5 0.01 90); }
.variant-label-dark { color: oklch(0.68 0.012 265); }
.variant-label-white { color: #fff; }

.lockup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.lockup-stacked { padding: 36px; gap: 16px; }
.lockup-stacked-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lockup-wordmark { padding: 36px; gap: 16px; justify-content: center; }

.clearspace-note {
  margin-top: 16px;
  background: oklch(0.97 0.006 90);
  border: 1px dashed oklch(0.8 0.008 90);
  border-radius: 16px; padding: 28px;
  display: flex; align-items: center; gap: 40px;
}
.clearspace-icon { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.clearspace-caption { font: 500 10.5px 'IBM Plex Sans', sans-serif; color: oklch(0.55 0.01 90); }
.clearspace-text { font-size: 13px; line-height: 1.6; color: oklch(0.5 0.01 90); max-width: 520px; }

.color-block { margin-top: 32px; }
.color-heading { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: oklch(0.5 0.01 90); margin-bottom: 14px; }

.swatch-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.swatch { border-radius: 14px; height: 110px; display: flex; align-items: flex-end; padding: 14px; box-sizing: border-box; }
.swatch-label { font: 600 12px 'IBM Plex Mono', monospace; color: #fff; }
.swatch-gradient { background: linear-gradient(135deg, oklch(0.68 0.19 265), oklch(0.65 0.19 330)); }
.swatch-indigo { background: oklch(0.68 0.19 265); }
.swatch-magenta { background: oklch(0.65 0.19 330); }

.color-columns { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.token-list { display: flex; flex-direction: column; gap: 8px; }
.token-row { display: flex; align-items: center; gap: 12px; }
.token-swatch { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.token-name { font: 600 12.5px 'IBM Plex Sans', sans-serif; }
.token-value { font: 400 11.5px 'IBM Plex Mono', monospace; color: oklch(0.5 0.01 90); }

.token-bg-light { background: oklch(0.985 0.004 90); border: 1px solid oklch(0.9 0.006 90); }
.token-surface-light { background: #fff; border: 1px solid oklch(0.9 0.006 90); }
.token-text-light { background: oklch(0.22 0.01 90); }
.token-muted-light { background: oklch(0.5 0.01 90); }
.token-bg-dark { background: oklch(0.13 0.018 265); }
.token-surface-dark { background: oklch(0.17 0.014 260); }
.token-text-dark { background: oklch(0.97 0.005 265); }
.token-muted-dark { background: oklch(0.68 0.012 265); }

.semantic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.semantic-chip { border-radius: 14px; padding: 16px; display: flex; align-items: center; gap: 10px; }
.semantic-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.semantic-success { background: oklch(0.72 0.17 155 / 0.12); }
.semantic-success .semantic-dot { background: oklch(0.55 0.15 155); }
.semantic-warning { background: oklch(0.68 0.15 75 / 0.15); }
.semantic-warning .semantic-dot { background: oklch(0.68 0.15 75); }
.semantic-danger { background: oklch(0.58 0.19 25 / 0.12); }
.semantic-danger .semantic-dot { background: oklch(0.58 0.19 25); }

.type-columns { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.type-card { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 1px 2px oklch(0.2 0.02 260 / 0.04), 0 12px 32px oklch(0.2 0.02 260 / 0.06); }
.type-sample { font-size: 34px; }
.type-sample-heading { font: 600 34px 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
.type-sample-body { font: 400 34px 'IBM Plex Sans', sans-serif; letter-spacing: -0.01em; }
.type-desc { font: 400 12.5px 'IBM Plex Sans', sans-serif; color: oklch(0.5 0.01 90); margin-top: 10px; }

.type-scale {
  margin-top: 16px; background: #fff; border-radius: 16px; padding: 28px;
  box-shadow: 0 1px 2px oklch(0.2 0.02 260 / 0.04), 0 12px 32px oklch(0.2 0.02 260 / 0.06);
  display: flex; flex-direction: column; gap: 16px;
}
.type-scale-row { display: flex; align-items: baseline; gap: 16px; }
.scale-desc { font: 400 13px 'IBM Plex Sans', sans-serif; color: oklch(0.5 0.01 90); }
.scale-h1 { font: 600 40px 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
.scale-h2 { font: 600 28px 'Space Grotesk', sans-serif; letter-spacing: -0.015em; }
.scale-h3 { font: 600 16px 'Space Grotesk', sans-serif; }
.scale-body { font: 400 15px 'IBM Plex Sans', sans-serif; }
.scale-label { font: 600 11px 'IBM Plex Sans', sans-serif; letter-spacing: .04em; text-transform: uppercase; }

.shape-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.shape-label { font: 600 13px 'IBM Plex Sans', sans-serif; margin-bottom: 14px; }
.shape-card-demo { height: 64px; border-radius: 16px; background: oklch(0.97 0.006 90); border: 1px solid oklch(0.9 0.006 90); }
.shape-btn-demo {
  display: inline-block; padding: 12px 24px; border-radius: 100px;
  background: linear-gradient(135deg, oklch(0.68 0.19 265), oklch(0.65 0.19 330));
  color: #fff; font: 600 13px 'IBM Plex Sans', sans-serif;
}

@media (max-width: 720px) {
  .variant-grid { grid-template-columns: 1fr 1fr; }
  .lockup-grid, .color-columns, .type-columns, .shape-grid { grid-template-columns: 1fr; }
  .swatch-row { grid-template-columns: 1fr; }
  .semantic-grid { grid-template-columns: 1fr; }
  .clearspace-note { flex-direction: column; align-items: flex-start; gap: 16px; }
}