/* ============================================================
   Kaze (風) Design System — Utility Classes
   Minimal set of composable utility classes
   ============================================================ */

/* ── Display ─────────────────────────────────────────────── */
.flex       { display: flex; }
.inline-flex { display: inline-flex; }
.hidden     { display: none; }
.block      { display: block; }
.inline     { display: inline; }

/* ── Flex ────────────────────────────────────────────────── */
.flex-row   { flex-direction: row; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.flex-1     { flex: 1 1 0%; }
.flex-none  { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }

/* ── Gap ─────────────────────────────────────────────────── */
.gap-0   { gap: var(--space-0); }
.gap-1   { gap: var(--space-1); }
.gap-1-5 { gap: var(--space-1-5); }
.gap-2   { gap: var(--space-2); }
.gap-3   { gap: var(--space-3); }
.gap-4   { gap: var(--space-4); }
.gap-5   { gap: var(--space-5); }
.gap-6   { gap: var(--space-6); }
.gap-8   { gap: var(--space-8); }

/* ── Padding ─────────────────────────────────────────────── */
.p-0  { padding: var(--space-0); }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.px-0  { padding-inline: var(--space-0); }
.px-1  { padding-inline: var(--space-1); }
.px-2  { padding-inline: var(--space-2); }
.px-3  { padding-inline: var(--space-3); }
.px-4  { padding-inline: var(--space-4); }
.px-5  { padding-inline: var(--space-5); }
.px-6  { padding-inline: var(--space-6); }
.px-8  { padding-inline: var(--space-8); }

.py-0  { padding-block: var(--space-0); }
.py-1  { padding-block: var(--space-1); }
.py-2  { padding-block: var(--space-2); }
.py-3  { padding-block: var(--space-3); }
.py-4  { padding-block: var(--space-4); }
.py-5  { padding-block: var(--space-5); }
.py-6  { padding-block: var(--space-6); }

.pt-0  { padding-top: var(--space-0); }
.pt-1  { padding-top: var(--space-1); }
.pt-2  { padding-top: var(--space-2); }
.pt-4  { padding-top: var(--space-4); }

.pb-0  { padding-bottom: var(--space-0); }
.pb-2  { padding-bottom: var(--space-2); }
.pb-4  { padding-bottom: var(--space-4); }

/* ── Margin ──────────────────────────────────────────────── */
.m-0  { margin: var(--space-0); }
.m-auto { margin: auto; }
.mx-auto { margin-inline: auto; }

.mt-0  { margin-top: var(--space-0); }
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }

.mb-0  { margin-bottom: var(--space-0); }
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* ── Width & Height ──────────────────────────────────────── */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.h-full  { height: 100%; }
.min-h-screen { min-height: 100dvh; }
.max-w-content { max-width: var(--content-max-width); }

/* ── Overflow ────────────────────────────────────────────── */
.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.overflow-x-auto  { overflow-x: auto; }

/* ── Position ────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }

/* ── Typography ──────────────────────────────────────────── */
/* Text size and color utilities removed — use Text component (BEM .text--*) instead */

.font-normal   { font-weight: var(--font-weight-normal); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

.leading-tight   { line-height: var(--line-height-tight); }
.leading-snug    { line-height: var(--line-height-snug); }
.leading-normal  { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose   { line-height: var(--line-height-loose); }

.tracking-tight  { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide   { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider  { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--letter-spacing-widest); }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap { white-space: nowrap; }

/* Tabular numbers — essential for financial data */
.tabular-nums { font-variant-numeric: tabular-nums; }
.font-mono    { font-family: var(--font-mono); }

/* ── Grid Presets ────────────────────────────────────────── */
.grid--2-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.grid--3-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.grid--auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

@media (max-width: 767px) {
  .grid--2-col,
  .grid--3-col {
    grid-template-columns: 1fr;
  }
}

/* ── Text Helpers ────────────────────────────────────────── */
.text--secondary {
  font-size: var(--font-size-xs);
  color: var(--color-fg-secondary);
}

/* ── Background Colors ───────────────────────────────────── */
.bg-primary     { background-color: var(--color-bg); }
.bg-secondary   { background-color: var(--color-bg-secondary); }
.bg-tertiary    { background-color: var(--color-bg-tertiary); }
.bg-surface     { background-color: var(--color-surface); }
.bg-positive-light { background-color: var(--color-positive-light); }
.bg-negative-light { background-color: var(--color-negative-light); }
.bg-warning-light  { background-color: var(--color-warning-light); }

/* ── Border ──────────────────────────────────────────────── */
.border     { border: 1px solid var(--color-border); }
.border-t   { border-top: 1px solid var(--color-border); }
.border-b   { border-bottom: 1px solid var(--color-border); }
.border-l   { border-left: 1px solid var(--color-border); }
.border-r   { border-right: 1px solid var(--color-border); }
.border-0   { border: none; }

/* ── Border Radius ───────────────────────────────────────── */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Shadows ─────────────────────────────────────────────── */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ── Opacity ─────────────────────────────────────────────── */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ── Transitions ─────────────────────────────────────────── */
.transition {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--duration-normal);
  transition-timing-function: var(--ease-default);
}

.transition-colors {
  transition-property: color, background-color, border-color;
  transition-duration: var(--duration-normal);
  transition-timing-function: var(--ease-default);
}

.transition-transform {
  transition-property: transform;
  transition-duration: var(--duration-normal);
  transition-timing-function: var(--ease-default);
}

/* ── Cursor ──────────────────────────────────────────────── */
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* ── Pointer Events ──────────────────────────────────────── */
.pointer-events-none { pointer-events: none; }

/* ── User Select ─────────────────────────────────────────── */
.select-none { user-select: none; }
.select-all  { user-select: all; }

/* ── Animations: Keyframes ───────────────────────────────── */

@keyframes kaze-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes kaze-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes kaze-slide-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes kaze-slide-down {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes kaze-slide-in-right {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes kaze-slide-out-right {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

@keyframes kaze-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes kaze-scale-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

@keyframes kaze-spin {
  to { transform: rotate(360deg); }
}

@keyframes kaze-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes kaze-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Animation Utilities ────────────────────────────────────── */

.animate-fade-in {
  animation: kaze-fade-in var(--duration-normal) var(--ease-out);
}

.animate-fade-out {
  animation: kaze-fade-out var(--duration-normal) var(--ease-in);
}

.animate-slide-up {
  animation: kaze-slide-up var(--duration-slow) var(--ease-out);
}

.animate-slide-down {
  animation: kaze-slide-down var(--duration-slow) var(--ease-out);
}

.animate-slide-in-right {
  animation: kaze-slide-in-right var(--duration-slower) var(--ease-out);
}

.animate-slide-out-right {
  animation: kaze-slide-out-right var(--duration-slower) var(--ease-in);
}

.animate-scale-in {
  animation: kaze-scale-in var(--duration-slow) var(--ease-spring);
}

.animate-scale-out {
  animation: kaze-scale-out var(--duration-normal) var(--ease-in);
}

.animate-spin {
  animation: kaze-spin 1s linear infinite;
}

.animate-pulse {
  animation: kaze-pulse 2s var(--ease-default) infinite;
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary) 0%,
    var(--color-bg-secondary) 50%,
    var(--color-bg-tertiary) 100%
  );
  background-size: 200% 100%;
  animation: kaze-shimmer 1.5s infinite;
}

/* ── Reduced Motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Screen Reader Only ──────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Theme-Responsive Image ────────────────────────────────── */
/* Apply to any image to soften it in dark mode */
.theme-photo {
  transition: filter var(--duration-slow) var(--ease-default);
}
[data-theme="dark"] .theme-photo {
  filter: brightness(0.8) contrast(1.1);
}

/* ============================================================
   Responsive Utilities
   sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px
   ============================================================ */

/* ── Container ──────────────────────────────────────────────── */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }

/* ── Responsive Display ─────────────────────────────────────── */

@media (min-width: 640px) {
  .sm\:hidden  { display: none; }
  .sm\:block   { display: block; }
  .sm\:flex    { display: flex; }
  .sm\:grid    { display: grid; }
  .sm\:inline  { display: inline; }
}

@media (min-width: 768px) {
  .md\:hidden  { display: none; }
  .md\:block   { display: block; }
  .md\:flex    { display: flex; }
  .md\:grid    { display: grid; }
  .md\:inline  { display: inline; }
}

@media (min-width: 1024px) {
  .lg\:hidden  { display: none; }
  .lg\:block   { display: block; }
  .lg\:flex    { display: flex; }
  .lg\:grid    { display: grid; }
  .lg\:inline  { display: inline; }
}

@media (min-width: 1280px) {
  .xl\:hidden  { display: none; }
  .xl\:block   { display: block; }
  .xl\:flex    { display: flex; }
  .xl\:grid    { display: grid; }
}

/* ── Responsive Grid Columns ─────────────────────────────── */

@media (min-width: 640px) {
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ── Responsive Flex Direction ───────────────────────────── */

@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-col { flex-direction: column; }
}

@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
}

@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row; }
}

/* ── Responsive Gap ──────────────────────────────────────── */

@media (min-width: 768px) {
  .md\:gap-4 { gap: var(--space-4); }
  .md\:gap-6 { gap: var(--space-6); }
  .md\:gap-8 { gap: var(--space-8); }
}

@media (min-width: 1024px) {
  .lg\:gap-6 { gap: var(--space-6); }
  .lg\:gap-8 { gap: var(--space-8); }
}

/* ── Responsive Padding ──────────────────────────────────── */

@media (min-width: 768px) {
  .md\:p-6 { padding: var(--space-6); }
  .md\:p-8 { padding: var(--space-8); }
  .md\:px-6 { padding-inline: var(--space-6); }
  .md\:py-6 { padding-block: var(--space-6); }
}

@media (min-width: 1024px) {
  .lg\:p-8 { padding: var(--space-8); }
  .lg\:px-8 { padding-inline: var(--space-8); }
}

/* ── Responsive Width ────────────────────────────────────── */

@media (min-width: 768px) {
  .md\:w-auto { width: auto; }
  .md\:w-1\/2 { width: 50%; }
  .md\:w-1\/3 { width: 33.333333%; }
}

@media (min-width: 1024px) {
  .lg\:w-auto { width: auto; }
  .lg\:w-1\/2 { width: 50%; }
  .lg\:w-1\/3 { width: 33.333333%; }
  .lg\:w-1\/4 { width: 25%; }
}