/* SKYBANANAS components. Shared by the site (/) and the design system (/design-system).
   Use token variables only (web/tokens.css). No raw colours or sizes here. */

/* Base */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

.wrap { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--layout-gutter); }

/* Brand period: every heading ends with one */
.period { color: var(--color-accent); }
.period-ink { color: var(--color-ink); }

/* Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px var(--space-6); border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-white);
  font-family: inherit; font-size: var(--text-body-size); font-weight: var(--font-semibold);
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-standard);
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.btn-ghost { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-ink); }
.btn-small { padding: 9px 18px; font-size: 15px; }
.btn-large { padding: 18px 30px; font-size: 18px; }
.on-dark .btn { background: var(--color-white); color: var(--color-ink); }
.on-dark .btn-ghost { background: transparent; color: var(--color-white); box-shadow: inset 0 0 0 2px var(--color-white); }

/* Labels */
.kicker {
  display: block; margin-bottom: var(--space-4);
  font-size: var(--text-label-size); font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-tracking); text-transform: uppercase;
  color: var(--color-text-muted);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--text-label-size); font-weight: var(--font-semibold);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); }

/* Card */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-8);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--color-text-muted); }
.card-icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--color-ink);
  display: grid; place-items: center; margin-bottom: var(--space-6);
}
.card-icon svg {
  width: 26px; height: 26px; fill: none; stroke: var(--color-accent);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Badge */
.badge {
  display: inline-block; align-self: flex-start;
  font-size: 12px; font-weight: var(--font-bold); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px var(--space-3); border-radius: var(--radius-pill);
  background: var(--color-inverse-border); color: var(--color-inverse-text-muted);
}
.badge-live { background: var(--color-accent); color: var(--color-ink); }

/* Project tile (dark) */
.tile {
  background: var(--color-inverse-surface); border: 1px solid var(--color-inverse-border);
  border-radius: var(--radius-md); padding: var(--space-8);
  min-height: 240px; display: flex; flex-direction: column; color: var(--color-inverse-text);
}
.tile h3 { margin-top: auto; padding-top: var(--space-12); }
.tile p { color: var(--color-inverse-text-muted); margin-top: var(--space-2); }
.tile a { color: var(--color-accent); }
.tile-empty { background: transparent; border-style: dashed; }

/* Step */
.step { border-top: 3px solid var(--color-ink); padding-top: var(--space-6); }
.step-num { font-weight: var(--font-black); font-size: 15px; color: var(--color-text-muted); }
.step h3 { margin: var(--space-3) 0 10px; }
.step p { color: var(--color-text-muted); }

/* Dark context */
.on-dark { background: var(--color-inverse-bg); color: var(--color-inverse-text); }
.on-dark .kicker, .on-dark .eyebrow { color: var(--color-inverse-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}