/* KAGEKIRI Design System · utilities. Small, single-purpose classes built on the tokens.
   Naming: .{property}-{token}  e.g. .p-4 = padding var(--kg-space-4), .text-muted, .gap-2, .rounded-lg */

/* ---- layout */
.row { display: flex; align-items: center; gap: var(--kg-space-2-5); }
.row.wrap, .wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--kg-space-2-5); }
.grid { display: grid; gap: var(--kg-space-4); }
.grid-2 { display: grid; gap: var(--kg-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--kg-space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-auto { display: grid; gap: var(--kg-space-3); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.between { justify-content: space-between; }
.center { align-items: center; justify-content: center; }
.items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
.grow { flex: 1; min-width: 0; }
.none { flex: none; }
.hidden { display: none !important; }
.stack > * + * { margin-top: var(--kg-space-3); }

/* ---- gap (4px grid) */
.gap-0 { gap: 0; } .gap-1 { gap: var(--kg-space-1); } .gap-2 { gap: var(--kg-space-2); } .gap-3 { gap: var(--kg-space-3); }
.gap-4 { gap: var(--kg-space-4); } .gap-6 { gap: var(--kg-space-6); } .gap-8 { gap: var(--kg-space-8); }
.gap-s { gap: var(--kg-space-1-5); } .gap-l { gap: 18px; }   /* legacy aliases */

/* ---- padding / margin */
.p-0 { padding: 0; } .p-2 { padding: var(--kg-space-2); } .p-3 { padding: var(--kg-space-3); } .p-4 { padding: var(--kg-space-4); }
.p-5 { padding: var(--kg-space-5); } .p-6 { padding: var(--kg-space-6); } .p-8 { padding: var(--kg-space-8); }
.px-3 { padding-inline: var(--kg-space-3); } .px-4 { padding-inline: var(--kg-space-4); } .px-6 { padding-inline: var(--kg-space-6); }
.py-2 { padding-block: var(--kg-space-2); } .py-3 { padding-block: var(--kg-space-3); } .py-4 { padding-block: var(--kg-space-4); }
.m-0 { margin: 0; } .mt-1 { margin-top: var(--kg-space-1); } .mt-2 { margin-top: var(--kg-space-2); } .mt-4 { margin-top: var(--kg-space-4); }
.mt-6 { margin-top: var(--kg-space-6); } .mt-8 { margin-top: var(--kg-space-8); } .mb-2 { margin-bottom: var(--kg-space-2); } .mb-4 { margin-bottom: var(--kg-space-4); }
.ml-auto { margin-left: auto; }

/* ---- text */
.text-display { font: var(--kg-text-display-weight) var(--kg-text-display-size)/var(--kg-text-display-leading) var(--kg-font-display); letter-spacing: var(--kg-text-display-tracking); }
.text-lg { font-size: var(--kg-text-body-lg-size); line-height: var(--kg-text-body-lg-leading); }
.text-base { font-size: var(--kg-text-body-size); line-height: var(--kg-text-body-leading); }
.text-sm { font-size: var(--kg-text-body-sm-size); line-height: var(--kg-text-body-sm-leading); }
.text-xs, .caption { font-size: var(--kg-text-caption-size); line-height: var(--kg-text-caption-leading); }
.label { font-size: var(--kg-text-label-size); letter-spacing: var(--kg-text-label-tracking); font-weight: var(--kg-text-label-weight); text-transform: uppercase; }
.mono { font-family: var(--kg-font-mono); font-size: var(--kg-text-mono-size); }
.jp { font-family: var(--kg-font-jp); }
.font-display { font-family: var(--kg-font-display); }
.tabular { font-variant-numeric: tabular-nums; }
.upper { text-transform: uppercase; letter-spacing: .1em; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.measure { max-width: var(--kg-size-measure); }
.w-semibold { font-weight: var(--kg-weight-semibold); } .w-bold { font-weight: var(--kg-weight-bold); }

/* ---- color */
.text { color: var(--kg-text); }
.muted, .text-muted { color: var(--kg-text-muted); }
.dim, .text-subtle { color: var(--kg-text-subtle); }
.text-accent { color: var(--kg-accent-text); } .text-accent-2 { color: var(--kg-accent-2-text); }
.text-success { color: var(--kg-success-text); } .text-warning { color: var(--kg-warning-text); }
.text-danger { color: var(--kg-danger-text); } .text-info { color: var(--kg-info-text); }
.bg { background: var(--kg-bg); } .bg-sunken { background: var(--kg-bg-sunken); }
.bg-surface-1 { background: var(--kg-surface-1); } .bg-surface-2 { background: var(--kg-surface-2); } .bg-surface-3 { background: var(--kg-surface-3); }
.bg-accent-soft { background: var(--kg-accent-soft); }

/* ---- borders, radius, shadow */
.border { border: 1px solid var(--kg-border); } .border-strong { border: 1px solid var(--kg-border-strong); }
.border-t { border-top: 1px solid var(--kg-border); } .border-b { border-bottom: 1px solid var(--kg-border); }
.rounded-sm { border-radius: var(--kg-radius-sm); } .rounded-md { border-radius: var(--kg-radius-md); }
.rounded-lg { border-radius: var(--kg-radius-lg); } .rounded-xl { border-radius: var(--kg-radius-xl); } .rounded-pill { border-radius: var(--kg-radius-pill); }
.cut-md { clip-path: polygon(var(--kg-cut-md) 0, 100% 0, 100% calc(100% - var(--kg-cut-md)), calc(100% - var(--kg-cut-md)) 100%, 0 100%, 0 var(--kg-cut-md)); }
.cut-lg { clip-path: polygon(var(--kg-cut-lg) 0, 100% 0, 100% calc(100% - var(--kg-cut-lg)), calc(100% - var(--kg-cut-lg)) 100%, 0 100%, 0 var(--kg-cut-lg)); }
.shadow-md { box-shadow: var(--kg-shadow-md); } .shadow-lg { box-shadow: var(--kg-shadow-lg); } .glow { box-shadow: var(--kg-glow); }

/* ---- motion */
.transition { transition: all var(--kg-duration-base) var(--kg-ease-out); }
.slash-line { height: 3px; border-radius: 3px; background: var(--kg-gradient-brand); transform: rotate(-22deg); }