@import url('../../colors_and_type.css');

/* Layout helpers used by the kit only */
.kit-page { min-height: 100vh; background: var(--bg-base); display: flex; flex-direction: column; }
.kit-main { flex: 1; }
.kit-container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter-desktop); }
.kit-reading { max-width: var(--reading-max); margin: 0 auto; padding: 0 var(--gutter-desktop); }
.kit-section { padding: var(--space-5) 0; }
.kit-section--tint { background: var(--bg-tint); }
.kit-section--subtle { background: var(--bg-subtle); }
.kit-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.kit-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 720px) {
  .kit-grid-2, .kit-grid-3 { grid-template-columns: 1fr; }
  .kit-section { padding: var(--space-4) 0; }
}

button { font-family: var(--font-body); cursor: pointer; }
button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.kit-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.kit-card-feature { border-top: 3px solid var(--color-primary); }
.kit-link { color: var(--color-primary); }
.kit-link:hover { text-decoration: underline; }

.kit-divider { height: 1px; background: var(--border); margin: var(--space-4) 0; }

/* hover states */
.kit-card-hover { transition: box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.kit-card-hover:hover { box-shadow: var(--shadow-md); border-color: rgba(229,34,75,0.3); }