/* Wikonomi visual system • Space Grotesk
 * See docs/BRAND_SYSTEM.md for design tokens and usage.
 * Intentionally scoped to type/semantic classes; existing Tailwind components remain valid.
 */
:root {
  --wk-font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wk-purple: #4B2798;
  --wk-purple-dark: #351A70;
  --wk-purple-tint: #F2ECFC;
  --wk-blue: #4DB8FF;
  --wk-blue-dark: #075B85;
  --wk-blue-tint: #E8F6FF;
  --wk-green: #66D17E;
  --wk-green-dark: #17683F;
  --wk-green-tint: #EAF9EE;
  --wk-ink: #162235;
  --wk-muted: #516174;
  --wk-canvas: #F7F9FC;
  --wk-surface: #FFFFFF;
  --wk-border: #DDE4ED;
  --wk-danger: #B42318;
  --wk-warning: #9A4D00;
}

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

body {
  font-size: 1rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

.wk-wordmark {
  font-family: var(--wk-font-sans);
  font-weight: 700; /* Space Grotesk's heaviest actual Google Fonts weight */
  letter-spacing: -0.045em;
  line-height: 1;
}

.wk-display {
  font-size: clamp(2.25rem, 4.8vw, 3.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.wk-page-title {
  font-size: clamp(1.875rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.wk-section-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.wk-card-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.wk-body-lg {
  font-size: 1.125rem;
  line-height: 1.65;
}

.wk-reading-copy {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.7;
}

.wk-price,
.wk-price-lg,
.wk-price-sm,
.wk-stat {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}

.wk-price {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.wk-price-lg {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
}

.wk-price-sm {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.wk-stat {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
}

.wk-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.wk-meta {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wk-muted);
}

.wk-button {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wk-brand-gradient {
  background-image: linear-gradient(110deg, var(--wk-green), var(--wk-blue) 50%, var(--wk-purple));
}

/* Semantic colors distinguish functional meaning from the brighter brand accents. */
.wk-info {
  color: var(--wk-blue-dark);
  background-color: var(--wk-blue-tint);
}
.wk-success {
  color: var(--wk-green-dark);
  background-color: var(--wk-green-tint);
}
.wk-danger {
  color: var(--wk-danger);
}
.wk-focus-ring:focus-visible {
  outline: 3px solid var(--wk-purple);
  outline-offset: 3px;
}

@media (max-width: 639px) {
  .wk-body-lg { font-size: 1rem; }
}

/* Respect browser zoom/font scaling: use rems and avoid fixed-height text containers. */